[Bug]: storybook build not working due to error from plugin-transform-block-scoping: Cannot set properties of undefined (setting 'kind')

[Sid-Turner-Ellis]

Describe the bug

After initiating a fresh React app, and then initiating storybook and running yarn build-storybook I get a build error:

ERR! => Failed to build the preview
ERR! Module build failed (from ./node_modules/babel-loader/lib/index.js):
ERR! TypeError: /Users/usrn/Documents/stbk-repro/src/stories/Button.stories.jsx: Cannot read properties of undefined (reading 'constantViolations')

I can reproduce this on 2 different computers.

To Reproduce

1. `npx create-react-app my-app`
2. `npx storybook init`
3. `npm run build-storybook`

System

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M2
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 107.0
    Safari: 16.0
  npmPackages:
    @storybook/addon-actions: ^6.5.15 => 6.5.15
    @storybook/addon-essentials: ^6.5.15 => 6.5.15
    @storybook/addon-interactions: ^6.5.15 => 6.5.15
    @storybook/addon-links: ^6.5.15 => 6.5.15
    @storybook/builder-webpack5: ^6.5.15 => 6.5.15
    @storybook/manager-webpack5: ^6.5.15 => 6.5.15
    @storybook/node-logger: ^6.5.15 => 6.5.15
    @storybook/preset-create-react-app: ^4.1.2 => 4.1.2
    @storybook/react: ^6.5.15 => 6.5.15
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

No response

[mrszympek]

Same problem here, when trying to integrate with next.js

[ch1qui]

Same problem here, working on an independent package, using esbuild to bundle. CRA might be unrelated.

[cjones26]

Same problem here, I don't believe this is related to CRA, but rather likely something either which is unlocked or upgraded in SB dependencies.

Note that we are not using CRA and still running into this issue.

[cjones26]

Note I've found that we can add the following to the overrides or resolutions field to our package.json file which will resolve the issue, for now:

"overrides": {
  "@babel/plugin-transform-block-scoping": "7.18.9"
}

v7.20.5 is the latest version which appears to work properly.

[MirKml]

Same here, even pure storybook for react install doesn't work either 😕.

$ npx storybook init --use-npm -t react -b webpack5
$ npm i -D webpack@latest
$ npm i react@17.0.2 react-dom@17.0.2

then npm run storybook and storybook throws error something like this

ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /.storybook/preview.js: Cannot set properties of undefined (setting 'kind')

Anyone cannot start with current stable - 6.5.15 - storybook for react component. It makes very bad reputation on newcomers. Even if problem is with 3rd party libs, it's still very bad for project as storybook. No daily QA builds failed?

[neogeek]

I also ran into this issue, and with a clean copy of create-react-app (TypeScript) and storybook (7.0), I could replicate the issue by removing the browserslist from the package.json file. Adding it back resolved the issue.

I'm not sure why this is required, as it wasn't before, and I can't find any information about it in the storybook docs.

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

[cjones26]

@neogeek I'm guessing it's because Babel packages integrate with the browserslist package (https://babeljs.io/docs/en/babel-preset-env#browserslist-integration) and this seems to be a Babel issue as opposed to a Storybook issue.

Weirdly enough my error changes after adding browserslist from the one listed by the OP to the one listed by @MirKml :

Cannot set properties of undefined (setting 'kind')

[neogeek]

Looks like they are already working on a solve #20383

[ndelangen]

Yes, I am, but I'm dependent on the babel team here... I'm afraid..

[ndelangen]

@neogeek thank you for that information, anything might help.
I posted all info I have here: babel/babel#15300

Hopefully it can be quickly resolved by the babel team.

[ndelangen]

Thank you for posting your work-around @cjones26 👏 I wish I could upvote it twice

[ndelangen]

On the storybook side of things, I've tried clearing node_modules and regenerating lockfiles:
#20386

And I've even tried that + upgrading babel-loader to latest:
#20383

Both run into the same issue I posted over on the babel repo.

[ndelangen]

Looks like another issue is created on their repo here: babel/babel#15302

[emiliosheinz]

Unfortunately, the workaround proposed by @cjones26 isn't working here. Is there anything else that could be tried?

[emiliosheinz]

Unfortunately, the workaround proposed by @cjones26 isn't working here. Is there anything else that could be tried?

Using resolutions instead of overrides worked!

[cjones26]

@emiliosheinz I know it's a silly question but have you done an npm i (or yarn i) after setting up the override / resolution? I would also double check that when you do npm ls @babel/plugin-transform-block-scoping and ensure that the override is functioning properly.

[cjones26]

@emiliosheinz Yep, if you're using yarn you need to use resolutions. Glad it could help you--I wasted an hour earlier trying to figure out the issue.

[emiliosheinz]

@cjones26 I didn't know it, my bad! Thank you for the help.

[neogeek]

There was an updated version of https://www.npmjs.com/package/@babel/plugin-transform-block-scoping pushed. After removing the browserslist property from package.json and rebuilding the package-lock file, everything seemed to work as expected.

[MirKml]

confirmed that babel fix the plugin (thx @neogeek for info) so

• new storybook install for react works
• upgrades to latest stable (6.5.15) work

I didn't test other workaround (resultions, overrides ...), but when new storybook patch will be published, you can remove workarounds and update into latest patch.

I think it can be closed, thank you guys for your work on it.

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.14 containing PR #20386 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.