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

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:

Create a Storybook project using the CRA preset (you may have to create a 5.3 build and then upgrade to 6.0).
Run the project, which should produce the error as this browserlist is the default for CRA.
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"
    ],
  },

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.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 11
Comments: 28 (2 by maintainers)

Most upvoted comments

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

+10

Pnickolas1 on Sep 23, 2020

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

boxdox on Aug 15, 2020

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.

JLHwung on Sep 30, 2020

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!

weeksling on Sep 22, 2020

Closing as it seems like we’ve figured this out… Thanks everyone!

hu0p on Feb 19, 2021

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

https://github.com/babel/babel/issues/11622

junoatwork on Sep 18, 2020

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

Quadriphobs1 on Aug 21, 2020

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

hu0p on Aug 13, 2020