Scaffolded react lib spec.tsx fails when adding @nrwl/react:storybook-configuration with _genMapping.maybeAddMapping is not a function error

Current Behavior

steps npx create-nx-workspace monorepo --preset=ts --packageManager=yarn yarn nx g @nrwl/react:library uiweb --publishable --importPath="@dasubh/xdk-uiweb"

scaffolded test called uiweb.spec.tsx is created. running nx run uiweb:test this test PASSES.

Now after adding story book configuration yarn nx generate @nrwl/react:storybook-configuration uiweb --no-configureCypress --no-generateCypressSpecs running nx run uiweb:test this test FAILS.

Expected Behavior

npx create-nx-workspace monorepo --preset=ts --packageManager=yarn yarn nx g @nrwl/react:library uiweb --publishable --importPath="@dasubh/xdk-uiweb"

scaffolded test called uiweb.spec.tsx is created. running nx run uiweb:test this test PASSES.

Now after adding story book configuration yarn nx generate @nrwl/react:storybook-configuration uiweb --no-configureCypress --no-generateCypressSpecs running nx run uiweb:test this test should PASS.

Failure Logs

 FAIL   uiweb  packages/uiweb/src/lib/uiweb.spec.tsx
  ● Test suite failed to run

    TypeError: /Users/subhranshu/Desktop/projects/monorepo/packages/uiweb/src/lib/uiweb.spec.tsx: (0 , _genMapping.maybeAddMapping) is not a function

      at SourceMap.mark (../../node_modules/@babel/core/node_modules/@babel/generator/lib/source-map.js:49:37)
      at Buffer._mark (../../node_modules/@babel/core/node_modules/@babel/generator/lib/buffer.js:138:60)
      at Buffer._append (../../node_modules/@babel/core/node_modules/@babel/generator/lib/buffer.js:117:12)
      at Buffer.append (../../node_modules/@babel/core/node_modules/@babel/generator/lib/buffer.js:78:10)
      at Generator._append (../../node_modules/@babel/core/node_modules/@babel/generator/lib/printer.js:192:52)
      at Generator.token (../../node_modules/@babel/core/node_modules/@babel/generator/lib/printer.js:120:10)
      at Generator.DirectiveLiteral (../../node_modules/@babel/core/node_modules/@babel/generator/lib/generators/base.js:76:10)
      at ../../node_modules/@babel/core/node_modules/@babel/generator/lib/printer.js:310:19
      at Buffer.withSource (../../node_modules/@babel/core/node_modules/@babel/generator/lib/buffer.js:208:5)
      at Generator.withSource (../../node_modules/@babel/core/node_modules/@babel/generator/lib/printer.js:176:15)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.229 s
Ran all test suites.

Environment

mac OS node - v14.17.3 npm - 6.14.13 yarn - 1.22.18

[prewk]

Update: Re-created the problem when using nx g storybook-configuration xxxx and then starting the storybook!

And, again, solved with rm -rf node_modules && yarn.

[prewk]

@mandarini That’s kind, I don’t except that kind of service from a free product so don’t sweat it!

I and others seem to have been able to resolve it by deleting node_modules which is a bit annoying debugwise, but now it works.

A short history is that I removed node_modules earlier, and removed 100% of all traces of Storybook in our nx workspace, including installed packages etc. Then I migrated nx 12 -> 14 (and Angular 11 to 14), and re-added the Storybook integration via the storybook-configuration generator.

That’s when the error happened. And a rm -rf node_modules && yarn fixed it.

My conclusion is that somewhere along the way, something is relying on something in Babel in a flaky way so that there’s a version mismatch or a buggy version is installed. The maybeAddMapping seems to be in Babel’s source map transpilation system.

That’s all I know 😃