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

[subhranshudas]

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

[mandarini]

Hi there @subhranshudas ! I just tried this with the latest version of Nx, and I cannot reproduce your issue. Can you please create a reproduction repository and share it with me? It would help me a lot when trying to debug this! :)

[subhranshudas]

Thanks @mandarini for checking out the issue. I was trying with below

   "@nrwl/cli": "14.1.5",
    "@nrwl/eslint-plugin-nx": "14.1.5",
    "@nrwl/jest": "14.1.5",
    "@nrwl/js": "14.1.5",
    "@nrwl/linter": "14.1.5",
    "@nrwl/react": "14.1.7",
    "@nrwl/web": "14.1.7",
    "@nrwl/workspace": "14.1.5"

let me try with the latest NX version, will get back!

[mandarini]

Cool, thanks! Can you also provide a reproduction repository?

[subhranshudas]

Hello @mandarini thanks for checking in! This is weird!! i tried multiple times to set up the NX workspace and it works for all the below combinations-

• 14.1.7
• 14.1.5
• 14.1.5 in nx core plugins, 14.1.7 in nx react plugins Now all of them are passing, i am unable to reproduce the issue now!!

Please close this issue if you want, in case i see that error i will check back here with a repro repo.

But for now the supposed broken workspace my package.json looks like-

  "name": "monorepo",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "prepare": "husky install"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },
  "private": true,
  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.6.5",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-is": "18.1.0",
    "regenerator-runtime": "0.13.7",
    "styled-components": "5.3.5",
    "tslib": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "7.12.13",
    "@babel/preset-typescript": "7.12.13",
    "@commitlint/cli": "^16.2.4",
    "@commitlint/config-angular": "^16.2.4",
    "@jscutlery/semver": "^2.23.4",
    "@nrwl/cli": "14.1.5",
    "@nrwl/eslint-plugin-nx": "14.1.5",
    "@nrwl/jest": "14.1.5",
    "@nrwl/js": "14.1.5",
    "@nrwl/linter": "14.1.5",
    "@nrwl/react": "14.1.7",
    "@nrwl/storybook": "14.1.7",
    "@nrwl/web": "14.1.7",
    "@nrwl/workspace": "14.1.5",
    "@storybook/addon-essentials": "~6.4.12",
    "@storybook/builder-webpack5": "~6.4.12",
    "@storybook/core-server": "~6.4.12",
    "@storybook/manager-webpack5": "~6.4.12",
    "@storybook/react": "~6.4.12",
    "@svgr/webpack": "^5.4.0",
    "@testing-library/react": "13.1.1",
    "@types/jest": "27.4.1",
    "@types/node": "16.11.7",
    "@types/react": "18.0.8",
    "@types/react-dom": "18.0.3",
    "@types/react-is": "17.0.3",
    "@types/styled-components": "5.1.25",
    "@typescript-eslint/eslint-plugin": "~5.18.0",
    "@typescript-eslint/parser": "~5.18.0",
    "babel-jest": "27.5.1",
    "babel-loader": "8.1.0",
    "babel-plugin-styled-components": "1.10.7",
    "commitizen": "^4.2.4",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "~8.12.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-react": "7.29.4",
    "eslint-plugin-react-hooks": "4.5.0",
    "husky": "^8.0.0",
    "jest": "27.5.1",
    "nx": "14.1.5",
    "prettier": "^2.5.1",
    "react-test-renderer": "18.1.0",
    "rimraf": "^3.0.2",
    "ts-jest": "27.1.4",
    "ts-node": "9.1.1",
    "typescript": "~4.6.2",
    "url-loader": "^3.0.0"
  }
}

One query- since i am building a publishable library i want my React, React DOM to have a peerDependency of atleast 16.8 for compatibility reasons. But now NX comes out of the box with

"react": "18.1.0",
    "react-dom": "18.1.0",
    "react-is": "18.1.0",

so any way to change these to "^16.8.0"? will it break anything from NX??

Thanks a ton!!

Regards.

[mandarini]

Hi there @subhranshudas ! I am not sure if it will break something with Nx. You can try and see. However, I say that it is possible that it will break something, because we try to keep the version of Nx working with the versions of the frameworks we install with each version. So, the latest Nx will work with that version of React, etc. I suggest you try it out, but be cautious. I don't work much with React so I don't know if there are any breaking/major changes between version 16.8 and 18.1 (sounds like there should be), but if there are, chances are some issues may be there. Again, if you want more info on that, I suggest you create a new issue, or ask in the Nx community slack! Someone will help you more on that!! :)

[subhranshudas]

Thank you @mandarini for your time!! Yup i am actually trying to test that. Have a dropped a slack message as well.

Regards!

[mandarini]

Perfect!!!! Thanks!! :D

[prewk]

I've gotten this as well in an Angular context with the latest migrations/updates. Storybook is a pandora's box of errors, every version has its own weirdness.

[mandarini]

@prewk I'm so sad to hear that! Can you let me know of your issue and I'll try my best to help. We strive to make the integration as stable as possible, so I'm really trying to sort out any bumps that people are experiencing!

[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 :)

[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.

[mandarini]

Thanks @prewk ! :)

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.