Storybook: TypeError: [BABEL] /.storybook/generated-refs.js: Cannot read property 'chrome' of undefined (While processing: "/node_modules/@babel/preset-env/lib/index.js")

Created on 11 Aug 2020  ·  26Comments  ·  Source: storybookjs/storybook

Describe the bug
Specifying a browserlist for development in package.json causes build to fail after upgrading to 6.0 from 5.3 in a Create-React-App project. The workaround is easy enough for now, I just wanted to get this out there so it's on everyone's radar.

To Reproduce
Steps to reproduce the behavior:

  1. Create a Storybook project using the CRA preset (you may have to create a 5.3 build and then upgrade to 6.0).
  2. Run the project, which should produce the error as this browserlist is the default for CRA.
  3. Remove the development key from the browserlist in package.json e.g.

Before:

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

After:

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
  },
  1. Attempt to start storybook again. It should now build correctly.

Console output (paths truncated for anonymity)

yarn run v1.22.4
$ start-storybook -p 9009 -s public
info @storybook/react v6.0.2
info 
info => Loading static files from: /public .
info => Loading presets
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Loading custom manager config.
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup.
66% building 470/470 modules 0 active✖ 「wdm」: Hash: 34356e0894ce57372edf
Version: webpack 4.44.1
Time: 6820ms
Built at: 08/11/2020 2:23:03 PM
                                      Asset      Size        Chunks                                Chunk Names
                                 index.html  2.25 KiB                [emitted]                     
        main.649deb921bb1531d1936.bundle.js  84.1 KiB          main  [emitted] [immutable]         main
runtime~main.99691078705b39185f99.bundle.js  6.12 KiB  runtime~main  [emitted] [immutable]         runtime~main
vendors~main.a452791f9709f6157bab.bundle.js  1.94 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
Entrypoint main [big] = runtime~main.99691078705b39185f99.bundle.js vendors~main.a452791f9709f6157bab.bundle.js main.649deb921bb1531d1936.bundle.js
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./.storybook/manager.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-actions/dist/register.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-storysource/register.js ./node_modules/@storybook/addon-knobs/dist/register.js ./node_modules/@storybook/addon-docs/dist/register.js ./node_modules/@storybook/addon-a11y/dist/register.js ./.storybook/generated-refs.js 136 bytes {main} [built]
[./.storybook/generated-refs.js] 1.9 KiB {main} [built] [failed] [1 error]
[./.storybook/manager.js] 1.89 KiB {main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-a11y/dist/components/A11YPanel.js] 10.3 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-a11y/dist/components/A11yContext.js] 9.36 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-a11y/dist/components/ColorBlindness.js] 7.62 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-a11y/dist/constants.js] 910 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-a11y/dist/register.js] 1.34 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/register.js] 804 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/register.js] 1.99 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-knobs/dist/register.js] 2.11 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/register.js] 1.92 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-storysource/register.js] 38 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/client/manager/index.js] 521 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
    + 430 hidden modules

ERROR in ./.storybook/generated-refs.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: [BABEL] /.storybook/generated-refs.js: Cannot read property 'chrome' of undefined (While processing: "/node_modules/@babel/preset-env/lib/index.js")
    at getLowestImplementedVersion (/node_modules/@babel/helper-compilation-targets/lib/utils.js:58:24)
    at /node_modules/@babel/helper-compilation-targets/lib/filter-items.js:26:77
    at Array.filter (<anonymous>)
    at targetsSupported (/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:25:54)
    at isRequired (/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:58:11)
    at filterItems (/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:70:9)
    at /node_modules/@babel/preset-env/lib/index.js:280:65
    at /node_modules/@babel/preset-env/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at /node_modules/@babel/core/lib/config/full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
    at Generator.next (<anonymous>)
    at step (/node_modules/gensync/index.js:254:32)
    at evaluateAsync (/node_modules/gensync/index.js:284:5)
    at Function.errback (/node_modules/gensync/index.js:108:7)
    at errback (/node_modules/@babel/core/lib/gensync-utils/async.js:70:18)
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./.storybook/manager.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-actions/dist/register.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-storysource/register.js ./node_modules/@storybook/addon-knobs/dist/register.js ./node_modules/@storybook/addon-docs/dist/register.js ./node_modules/@storybook/addon-a11y/dist/register.js ./.storybook/generated-refs.js main[9]

ERROR in ./.storybook/manager.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: [BABEL] /.storybook/manager.js: Cannot read property 'chrome' of undefined (While processing: "/node_modules/@babel/preset-env/lib/index.js")
    at getLowestImplementedVersion (/node_modules/@babel/helper-compilation-targets/lib/utils.js:58:24)
    at /node_modules/@babel/helper-compilation-targets/lib/filter-items.js:26:77
    at Array.filter (<anonymous>)
    at targetsSupported (/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:25:54)
    at isRequired (/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:58:11)
    at filterItems (/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:70:9)
    at /node_modules/@babel/preset-env/lib/index.js:280:65
    at /node_modules/@babel/preset-env/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at /node_modules/@babel/core/lib/config/full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
    at Generator.next (<anonymous>)
    at step (/node_modules/gensync/index.js:254:32)
    at evaluateAsync (/node_modules/gensync/index.js:284:5)
    at Function.errback (/node_modules/gensync/index.js:108:7)
    at errback (/node_modules/@babel/core/lib/gensync-utils/async.js:70:18)
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./.storybook/manager.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-actions/dist/register.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-storysource/register.js ./node_modules/@storybook/addon-knobs/dist/register.js ./node_modules/@storybook/addon-docs/dist/register.js ./node_modules/@storybook/addon-a11y/dist/register.js ./.storybook/generated-refs.js main[1]
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.47 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.12 KiB {HtmlWebpackPlugin_0} [built]
WARN force closed preview build

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

94% after seal

System:
Please paste the results of npx -p @storybook/cli@next sb info here.


Environment Info:
(node:99036) UnhandledPromiseRejectionWarning: TypeError: (e || []).filter is not a function
    at /.npm/_npx/98998/lib/node_modules/@storybook/cli/node_modules/envinfo/dist/envinfo.js:1:73314
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Promise.all (index 6)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:99036) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:99036) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
PN compatibility with other tools cra dependencies has workaround question / support yarn / npm

Most helpful comment

Removing yarn.lock and node_modules, then re-installing using yarn, fixed all issues.

All 26 comments

cc @mrmckeb

Apparently it also happens in other cases, I have both of browserlist development and production and even then it didn't work.

yarn run v1.22.4
$ start-storybook -p 6006 -s public
info @storybook/react v6.0.2
info 
info => Loading static files from: path/to/project/public .
info => Loading presets
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup.
63% building 445/449 modules 4 active ...5b-98b0-31c5230becbf/projects/rpg-music-manager/rpg-sound-manager-v2/node_modules/@storybook/components/dist/blocks/ArgsTable/ArgValue.js✖ 「wdm」: Hash: ac28075e4697ecb0f066
Version: webpack 4.44.1
Time: 8767ms
Built at: 08/11/2020 9:50:32 PM
                                      Asset      Size        Chunks                                Chunk Names
                                 index.html  2.25 KiB                [emitted]                     
        main.b192e3d9b947c1436bef.bundle.js  81.4 KiB          main  [emitted] [immutable]         main
runtime~main.99691078705b39185f99.bundle.js  6.12 KiB  runtime~main  [emitted] [immutable]         runtime~main
vendors~main.a4ed4de22f22e3b776dc.bundle.js  1.58 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
Entrypoint main [big] = runtime~main.99691078705b39185f99.bundle.js vendors~main.a4ed4de22f22e3b776dc.bundle.js main.b192e3d9b947c1436bef.bundle.js
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-actions/dist/register.js ./node_modules/@storybook/addon-docs/dist/register.js ./node_modules/@storybook/addon-controls/dist/register.js ./node_modules/@storybook/addon-backgrounds/dist/register.js ./node_modules/@storybook/addon-viewport/register.js ./.storybook/generated-refs.js 124 bytes {main} [built]
[./.storybook/generated-refs.js] 2.69 KiB {main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-actions/dist/constants.js] 541 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/containers/ActionLogger/index.js] 8.63 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/register.js] 804 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/constants.js] 452 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/containers/BackgroundSelector.js] 13.2 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/containers/GridSelector.js] 5.71 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/register.js] 2.18 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-controls/dist/register.js] 2.34 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/register.js] 1.99 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/register.js] 1.92 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-viewport/register.js] 137 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/client/manager/index.js] 521 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
    + 397 hidden modules

ERROR in ./.storybook/generated-refs.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: [BABEL] path/to/project/.storybook/generated-refs.js: Cannot read property 'chrome' of undefined (While processing: "path/to/project/node_modules/@babel/preset-env/lib/index.js")
    at getLowestImplementedVersion (path/to/project/node_modules/@babel/helper-compilation-targets/lib/utils.js:58:24)
    at targetEnvironments.filter.environment (path/to/project/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:26:77)
    at Array.filter (<anonymous>)
    at targetsSupported (path/to/project/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:25:54)
    at isRequired (path/to/project/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:58:11)
    at filterItems (path/to/project/node_modules/@babel/helper-compilation-targets/lib/filter-items.js:70:9)
    at _default (path/to/project/node_modules/@babel/preset-env/lib/index.js:280:65)
    at path/to/project/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at path/to/project/node_modules/@babel/core/lib/config/full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (path/to/project/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
    at Generator.next (<anonymous>)
    at step (path/to/project/node_modules/gensync/index.js:254:32)
    at evaluateAsync (path/to/project/node_modules/gensync/index.js:284:5)
    at Function.errback (path/to/project/node_modules/gensync/index.js:108:7)
    at errback (path/to/project/node_modules/@babel/core/lib/gensync-utils/async.js:70:18)
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-actions/dist/register.js ./node_modules/@storybook/addon-docs/dist/register.js ./node_modules/@storybook/addon-controls/dist/register.js ./node_modules/@storybook/addon-backgrounds/dist/register.js ./node_modules/@storybook/addon-viewport/register.js ./.storybook/generated-refs.js main[8]
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.53 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.18 KiB {HtmlWebpackPlugin_0} [built]
WARN force closed preview build

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

94% after sealpath/to/project/node_modules/fork-ts-checker-webpack-plugin/lib/index.js:452
        this.service.on('message', message => this.serviceRpc.dispatch(message));
                                                              ^

TypeError: Cannot read property 'dispatch' of undefined
    at ChildProcess.service.on.message (path/to/project/node_modules/fork-ts-checker-webpack-plugin/lib/index.js:452:63)
    at ChildProcess.emit (events.js:198:13)
    at emit (internal/child_process.js:832:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@Alecell I'm curious. Did this happen after upgrading (from <=5.3) or is this a new project? Mine was after upgrading from 5.3, so I haven't had a chance to test in a new project. It's also interesting that yours made it past 94% after seal. Mine just hangs there.

cc @mrmckeb, @shilman
I have the same, migrated from 5.3
One plugin support data is missed, temporary return static version of chrome if noo plugin
Знімок екрана 2020-08-14 о 01 40 11

@hu0p I haven't migrated, I just run npx -p @storybook/cli sb init and then yarn storybook. It isn't a completely fresh app, but I create it recently and it was not ejected.

Unfortunately I have to migrate my browserlist to .browerlistrc file

[production]
> 0.2%
not dead
not op_mini all

[development]
last 1 chrome version
last 1 firefox version
last 1 safari version

@hu0p but removing the development key from browserlist allows storybook to run correctly, but it breaks React Scripts. Any other solution?

Edit: Solution I found is to delete your node_modules folder and run npm install or yarn install.

This is broken for me as well. I cloned my repo on a new computer, ran yarn && yarn storybook and it failed w/ the error:


ERROR in ./.storybook/generated-refs.js                                                                                                                                 Module build failed (from ./node_modules/babel-loader/lib/index.js):                                                                                                    Error: [BABEL] /xxxxxx/.storybook/generated-refs.js: Unknown option: .visitor. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

Deleting & re-installing yarn.lock and node_modules didn't fix it. I set this up last week with npx sb init.

I can make the repo public if that's helpful

@brianc yes please! 🙏

@hu0p but removing the development key from browserlist allows storybook to run correctly, but it breaks React Scripts. Any other solution?

same here, solved it but breaks react-scripts start

$ react-scripts start
? We're unable to detect target browsers.

Would you like to add the defaults to your package.json? No
As of react-scripts >=2 you must specify targeted browsers.
Please add a browserslist key to your package.json.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I personally could build and start with react-scripts and my code doesn't break though

I personally could build and start with react-scripts and my code doesn't break though

@Quadriphobs1 after removing the browserlist entry in package.json?

Yeah I created a .browserlistrc file
Screenshot 2020-08-21 at 10 44 37

Screenshot 2020-08-21 at 10 44 16

~@Quadriphobs1 I tried with the .browserlistrc but it still complains that it is unable to detect target browsers.~

~which version of react-scripts are you at? mine is ^3.4.3~

update: the issue is the typo, it should be .browserslistrc

Yeah I created a .browserlistrc file

@Quadriphobs1 Even I tried this, but for some odd reason couldn't get it to work, maybe I added the list as JSON.
Another question, did you upgrade from 5.3.x?

@armand1m
Yes it is "react-scripts": "^3.4.2",

@boxdox Yes I upgraded from 5.3.x

@shilman I added you as a collaborator on the repo. It's not super secret or anything but I'm not ready to publish it yet so its still private but you should have collaborator access. I haven't run storybook since it broke for me 2 days ago so the code may have rotted a bit - particularly since I upgraded to react@experimental, but the bug is still reproducible at commit c205bf7efa5dc24e6913353bef11c19c03b31d25.

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Hey, same issue here, while upgrading from 5.3.19 to 6.0.21.

My specific error is:

ERROR in ./.storybook/generated-refs.js
Module build failed (from ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js):
Error: Unknown option: .Reason why this file is here. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

I also ran into this issue when upgrading from 5.3.19 to storybook/react 6.0.21 on an existing (not CRA) project, using browserslistrc.

Initially, I got build errors similar to the OP:

ERROR in ./.storybook/addons.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: [BABEL] $PROJECT_DIR/.storybook/addons.js: Cannot read property 'android' of undefined (While processing: "$PROJECT_DIR/node_modules/@storybook/core/node_modules/@babel/preset-env/lib/index.js")

ending at

94% after seal

Initially, my .browserslistrc file looked like:

# Browsers that we support
> 0.2%
last 2 versions
not dead

From comments in this issue, I added the [production] tag:

[production]
> 0.2%
last 2 versions
not dead

and now I receive the following new error:

ERROR in ./.storybook/generated-refs.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: $PROJECT_DIR/.storybook/generated-refs.js: 'loose' mode configuration must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled).

...

94% after seal

Related:

@Alecell I'm curious. Did this happen after upgrading (from <=5.3) or is this a new project? Mine was after upgrading from 5.3, so I haven't had a chance to test in a new project. It's also interesting that yours made it past 94% after seal. Mine just hangs there.

Did you find a solution to this? I have the same error in which it hangs at 94%. Setup in an existing project, with no previous storybook setup.

Hey @weeksling I don't, I just gave up for now :/

Hey @weeksling I don't, I just gave up for now :/

Oddly enough, deleting my yarn.lock and node_modules and rerunning yarn fixed it for me. Hope it gets fixed for your case as well!

Removing yarn.lock and node_modules, then re-installing using yarn, fixed all issues.

This is an upstream Babel issue that has been fixed in https://github.com/babel/babel/pull/11634. Please upgrade @babel/* deps to latest versions.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tycho01 picture tycho01  ·  76Comments

ilyaulyanov picture ilyaulyanov  ·  100Comments

joeruello picture joeruello  ·  79Comments

dependencies[bot] picture dependencies[bot]  ·  142Comments

p3k picture p3k  ·  61Comments