storybook: Storybook v5 breaks when using core-js ^3.0
Describe the bug
Storybook doesn’t compile after upgrading core-js to version 3.
This might have something to do with symbol polyfill required in https://github.com/storybooks/storybook/blob/0bdb2ca94e5ec732d84d3b330aa3b5bedfc534ec/lib/core/src/server/common/polyfills.js#L3
To Reproduce Steps to reproduce the behavior:
- Install
core-jsversion 3.0 or higher - Have
corejs: { version: 3 },in@babel/envoptions - Try running storybook server
- Observe error
ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator' in '/Users/Work/react/.storybook'
@ ./.storybook/config.js 3:0-55
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true
System:
- OS: MacOS
- Framework: react
- Addons: addon-actions@5.0.3, addon-info@5.0.3, addon-knobs@5.0.3, addon-link@5.0.3, addons@5.0.3, react@5.0.3
- Version: 5.0.3
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 53
- Comments: 100 (32 by maintainers)
Commits related to this issue
- Share Webpack config with Storybook Requires upgrading to to Storybook@next as a workaround for https://github.com/storybooks/storybook/issues/6204 — committed to luontola/territory-bro by luontola 5 years ago
- chore: upgrade storybook dependencies to ^5.1.1 (#114) * Upgrade Storybook to latest minor release (5.1.1) * Add `.storybook/.babelrc` that extends the root `.babelrc` to fix [errors about not being... — committed to textkernel/oneui by deleted user 5 years ago
- Add core-js@3 as a dev dependency After installing happo.io in this project after the upgrade to Storybook v5, I started running in to problems with the wrong core-js version being used. @storybook/c... — committed to trotzig/react-dates by trotzig 5 years ago
- Storybook needs a hackey way now https://github.com/storybookjs/storybook/issues/6204 — committed to okupara/partial-tube by okupara 5 years ago
- fix: add missing core-js dependency This should resolve the issue some people are seeing in #6204 — committed to ForbesLindesay/storybook by ForbesLindesay 5 years ago
- storybook broke after updating node to v12, this is a fix for the one issue, still struggling with core-js as described here: https://github.com/storybookjs/storybook/issues/6204 — committed to netliferesearch/netlife2019 by deleted user 5 years ago
I’m having this problem too. I’m using the latest firebase which added a dependency to core-js@3 recently. after upgrading firebase, the storybook used to run produces the following errors:
ah so it works when I delete the alias:
Had the same issue running @storybook/vue 5.1.9. Running
yarn why core-jsturned out this:✅ Adding
core-js@^2.6.9to devDependencies solved it for me.Also using
firebase@5.9.4withstorybook@5.0.8and adding this to.storybook/webpack.config.jssolved the issue.I have this issue after upgrading to
v5.1.9fromv5.0.6.I’m working on this, new release within 24h!
I found a more robust solution to get Storybook working in a Nuxt project. The solution depends on a version mismatch of core-js. Nuxt uses per default version 2 and Storybook version 3. So to solve the issue I have to follow this note from @nuxt/babel-preset-app:
I get a working environment again with Nuxt 2.11.0 using this update on my nuxt.config.js:
I came across this solution because I couldn’t update nuxt to latest stable.
@filippoitaliano I have the exact same error. I can confirm the file is present in core-js modules path and also babel preset has core-js 3 enabled, but still fails. Were you able to sort this out ?
Edit:
If I remove addon-storysource, works as expected. Not sure what’s causing this though.
Edit 2: Dug deeper. For some reason, the storysource loader needs all .js files to be in it to show up in addon panel, and had to exclude node modules in the config
Possibly related to #3626 #6984
Hi, experiencing the same issue with core-js even on 5.1.4. Manuall installing core-js as dev dependency didn’t work either.
Was able to fix by manually installing latest npm i core-js -D. It’s not good to manually install a dependency. it should properly manage such issues internally.
Waiting for the proper fix.
Same problem here, the remove alias don’t fix the problem for me 😦
wow. aliases are scary. why is storybook using them?
I still came across the same issue while using core-js@v3 in my main project. The solution was to make sure in webpack config, that
core-js/modulesis resolved to the version bundled with storybookHacky solution but should be good enough for now.
Same issue. Fixed after downgrading from
v5.1.9tov5.0.6Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.1.5 containing PR #7086 that references this issue. Upgrade today to try it out!
Closing this issue. Please re-open if you think there’s still more to do.
@shilman just updated, and same errors… 😦
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator'Same issue for me. Removing the alias does not fix the issue
Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.1.4 containing PR #7016 that references this issue. Upgrade today to try it out!
Closing this issue. Please re-open if you think there’s still more to do.
Upgrading my vue.js project to
"@storybook/vue": "^5.1.1"solved the core-js alias problem for me. 👍babel.config.jsvue.config.jswhich vue-cli merges in with the dynamically generated webpack config.)i solved it by moving my
.babelrcinto my.storybookDeleting the alias didn’t work for me. However, I was able to workaround this by moving our babel file into
.storybookThis PR will address this and many other issues I think: https://github.com/storybooks/storybook/pull/6566
It’s probably a major breaking change though, so it might ship in V6, we’re still debating this.
Possibly we can put some time into splitting that PR into multiple PRs so we may be able to merge and release some things faster.
Help would be appreciated a lot!
This is a workaround rather than a fix, but rolling back ALL of my Storybook packages (including addons) to v 5.0.6 has fixed this. Nothing else in this thread helped.
(Commands for React + Yarn below, but easily translatable to NPM/Vue):
First up:
Followed by:
I ran
yarn upgrade interactive --latest, upgraded all storybook related dependencies and now it’s working! 🎉FYI: This error only happened after I added the
@storybook/addon-knobsaddon.or airbnb-browser-shims :-p
either way, node_modules should always be excluded from transpilation.
babel polyfill is deprecated and must be replaced by core-js everywhere
I still getting errors for almost every component I have, like the following:
I’m not excluding it can be my fault. I claned yarn cache, deleted yarn.lock, installed the latest version of every dependency. I don’t have core-js installed as a dependency but I use babel with some presets like
@babel/preset-env. I have a custom webpack config:Still happening with
"@storybook/react": "^5.1.3"- Installingcore-js --devfixed the issue on my end.@zjaml That’s
.storybook/webpack.config.js. Please let me know if it works for you!Just wanted to share my experience with this bug after spending a day on it…
I read through numerous GH issue threads, including this one, when troubleshooting the issue. I tried a few of the suggested fixes, with only one resulting in “acceptable” success.
Reference
Putting all this in one place since, cuz. 😅
Existing `.babelrc` at project root
Root `.browserslistrc`
Relevant (mostly) `package.json`
System Info
Project Status and Prerequisites
useBuiltIns: 'usage', where previously we were using a manual import of@babel/polyfilland the default foruseBuiltIns. i anticipate this change getting merged soon. this is the primary reason i can/will not include corejs as a dependency in my current change, as many others have suggested (and verified) as a fix..babelrc(seen above) for the main app. this config uses@babel/preset-envand uses a root.browserslistrc(seen above) to determine polyfill usage. no.storybook/.babelrcis present in our app’s mainline branch..jsprocessing for reasons outlined in this storybook issue.Early Fix Attempts
Most of my early attempts at fixing the issue revolved around trying to set options in the root
.babelrc(seen above) to try and communicate to babel (as run by thebuild-storybooktool) how i want the transpilation to occur. No configuration ofuseBuiltIns,sourceType, etc. as suggested by others was successful. Additionally, I tried the whole clean-npm-cache-remove-node-modules-and-package-lock-then-npm-install route, to no avail (even though that did cause some deps of deps to change a bit).Final Solution
While being initially hesitant to try using a custom
.storybook/.babelrc, I was running out of options. I had tried previously to create that file and make it work harmoniously with the root.babelrcvia theextendsproperty and hit a wall, but I decided to give it another go.A simple move of the root babel config to the storybook-specific config allowed the static site build to complete successfully, but there were still some runtime errors indicative of faulty transpilation (re-exporting some imports resulted in those values being
undefinedin the file into which the final imports live). It was about this time I realized that I didn’t need any polyfills for storybook, so I removed the@babel/preset-envpreset in the new.storybook/.babelrcaltogether. HUZZAH, problem solved! The original config needed to persist for the app, however, so I renamed to.storybook/.babelrc-ciand restored the original root config. Then, I had to update our CI pipeline to check for the ci config and rename to cut off the-cisuffix before the static site build, but that was trivial.Guessing at the Problem(s)
This process had me inspecting my packages and the lockfile frequently, and I discovered that, while storybook v5.3.19 and all of its addons have a dependency on corejs v3.x.x, the existing
@babel/polyfilland a smattering of other babel deps relied on corejs v2.x.x! I’m guessing that at least one issue is the resolution in the app to use the lowest common denominator of v2. This made sense since the errors I was experiencing were referencing modules likees.array.iteratorwhile v2 provides modules likees6.array.iterator. I’m unsure of how the storybook dep is conflicting if it aims to support older babel/corejs configs, but it appears to be the case. Also, there must be something about how either/all storybook-babel/installed babel/storybook-corejs/installed-corejs find and apply an existing.babelrc. I am at a loss as to why moving the root config into a storybook-specific config magically solves the problem. Pathing maybe? 🤷♂️Conclusion
If you’ve stuck around after all this blathering, congrats! 😂
All in all, I’m not thrilled with the hoops I had to jump through to get around this problem, but perhaps my situation is somewhat unique. Also, I’ll be able to rip it all out after my aforementioned babel/webpack/storybook upgrades get merged.
Anyway, I hope this was interesting to at least one person suffering from the same issue. And I’ll go ahead and tag @shilman and @ndelangen since they seem invested in solving this problem. 👋
Fixed it locally with: rm ./package-lock.json rm -rf ./node_modules npm install
Now npm run storybook works
Same issue with the version 5.3.19 while dealing with the migration from core-js v2 to v3
@masives Running into the same issue with gatsby. Could you post a link to the comment / .babelrc as i can’t seem to find them in this issue.
Nvm. Issues was causes by stories being in pages directory. Solved the issue by moving pages stories to stories
Using
@storybook/vue5.2.5 besides of Nuxt.js v2.10.1 and had the same issue:yarn storybookworks, butyarn buildor any other nuxt related task failed.yarn why core-jsprovides the following output:So I use the same approach provided by @frebro, try
and 🎉 : I get a working environment:
yarn storybook,yarn buildand all other tasks are working again.Solved by installing https://www.npmjs.com/package/babel-loader
package.json
Make sure to delete your node_modules at first.
rm -rf node_modulesI’m also seeing this on an Angular project, hence no .babel file. No luck with either the separate core-js install or the alias deletion.
All revisions at 5.1.1.
Apologies I haven’t had the time to debug any further.
It worked! I copied .babelrc in .storybook
confirming this fix worked for me too, firebase@5.10.1 and storybook@5.0.11
added the file ./storybook/webpack.config.js with the above
Should we delete the alias from the preview’s webpack.config?
maybe even all aliases?
I’m using babel preset-env and I faced the same issue with storybook 5.0.10
The delete alias workaround fixed it for me. 🙏 @christophehurpeau
@shilman it works that way! Thanks!
unfortunately updating both firebase and storybook to the latest didn’t fix my problem. I have to stop using storybook for this issue.
@shilman also tried 5.0.6, same result (https://github.com/christophehurpeau/cra-rest-hooks-storybook/tree/storybook-5.0.6)
@christophehurpeau Any chance you can try out
5.0.6for me? Re-opening this. 😭@lumio That’s not an error, it’s a warning. It’s fixed in
5.1.0-alpha.16and I’ll release the fix tolatestafter it’s been out for a few days if nobody complains.