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:
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"
],
},
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.
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
@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
andstart
withreact-scripts
and my code doesn't break though
@Quadriphobs1 after removing the browserlist entry in package.json?
Yeah I created a .browserlistrc
file
~@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.
Most helpful comment
Removing yarn.lock and node_modules, then re-installing using yarn, fixed all issues.