Storybook v5 breaks when using core-js ^3.0 #6204
Comments
|
Storybook is using core-js incorrectly somehow. |
|
client-api looks like it should have core-js@2 as a dependency since the generated core requires it |
|
Although it says it is fixed with 5.0.4 and 5.0.5, I still get this error. How to reproduce: |
|
@lumio That's not an error, it's a warning. It's fixed in |
|
Got it! Thanks! |
|
I upgrade storybook version to 5.0.6 and it solved this problem. |
|
@jessy1092 Great to hear it. I'm closing this for now. If anybody runs into this problem again I'll reopen. |
|
Hello, Here a reproducible repo: https://github.com/christophehurpeau/cra-rest-hooks-storybook I hope this helps |
|
@christophehurpeau Any chance you can try out |
|
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 Hacky solution but should be good enough for now. |
|
@shilman also tried 5.0.6, same result (https://github.com/christophehurpeau/cra-rest-hooks-storybook/tree/storybook-5.0.6) |
|
@artursvonda I'm not using core-js v3, a dependency uses it. I don't have |
|
ah so it works when I delete the alias: |
|
wow. aliases are scary. why is storybook using them? |
|
cc @ndelangen |
|
I'm having this problem too. I'm using the latest firebase which added a dependency to core-js@3 recently. |
|
can confirm, // In some story or dependency of a story
import firebase from "firebase/app"in a fresh |
|
Same issue for me. Going back to |
Also using |
|
I just saw firebase had an update to |
|
unfortunately updating both firebase and storybook to the latest didn't fix my problem. |
|
Same issue. Fixed after downgrading from |
|
@JamyGolden & @Exomnius could you please share more about your setup? the output of |
|
@ndelangen I've upgraded to Edit, had to downgrade again, failing CI tests. I did a |
|
You got it working locally, but the CI still had the same error? |
|
@ndelangen yeah the CI and another dev are having issues (I'll update with their yarn/node version when I get hold of it), however things are fine on my side (yarn An example of the same error which exists on every assertion: |
|
aha, so storybook is running OK, but a test is still using an old core-js version! What's inside |
|
@ndelangen the error I previously pasted was related to storyshots running (Which only occurs after updating the version of storybook). The errors the other dev gets when running Not sure if this is helpful info, but |
Solved by installing https://www.npmjs.com/package/babel-loader package.json |
|
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: |
… issue, still struggling with core-js as described here: storybookjs/storybook#6204
|
Im seeing the samme issue when I try to run storybook: This happened after updating to node v12 using nvm. We had to do this to fix a polyfill issue so I can't downgrade node. Before that everything was working. Unfortunately I do not know what node version I was on before that. I've tried everything on this thread, but I don't want to roll back to 5.0.6., as a big reason for setting up storybook for this project is using the new docs. I've pushed everything here: https://github.com/netliferesearch/netlife2019/tree/storybook_setup_stories Edit: I downgraded node and it still isn't working, should have tried that before posting. I'm a bit at a loss of what's happening, I'll keep looking. |
|
Using $ yarn why core-js
yarn why v1.17.3
[1/4] 🤔 Why do we have the module "core-js"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "core-js"
info Reasons this module exists
- Hoisted from "@storybook#addon-actions#core-js"
- Hoisted from "@storybook#addon-knobs#core-js"
- Hoisted from "@storybook#addon-links#core-js"
- Hoisted from "@storybook#addon-viewport#core-js"
- Hoisted from "@storybook#addons#core-js"
- Hoisted from "@storybook#vue#core-js"
- Hoisted from "@storybook#addon-actions#@storybook#api#core-js"
- Hoisted from "@storybook#addons#@storybook#channels#core-js"
- Hoisted from "@storybook#addon-actions#@storybook#client-api#core-js"
- Hoisted from "@storybook#addon-viewport#@storybook#client-logger#core-js"
- Hoisted from "@storybook#addon-actions#@storybook#components#core-js"
- Hoisted from "@storybook#addon-actions#@storybook#core-events#core-js"
- Hoisted from "@storybook#vue#@storybook#core#core-js"
- Hoisted from "@storybook#addon-links#@storybook#router#core-js"
- Hoisted from "@storybook#addon-actions#@storybook#theming#core-js"
- Hoisted from "@storybook#addon-actions#@storybook#client-api#@storybook#channel-postmessage#core-js"
- Hoisted from "@storybook#vue#@storybook#core#@storybook#node-logger#core-js"
- Hoisted from "@storybook#vue#@storybook#core#@storybook#ui#core-js"
- Hoisted from "@storybook#vue#@storybook#core#lazy-universal-dotenv#core-js"
- Hoisted from "@storybook#addon-actions#@storybook#components#simplebar-react#simplebar#core-js"
info Disk size without dependencies: "7.02MB"
info Disk size with unique dependencies: "7.02MB"
info Disk size with transitive dependencies: "7.02MB"
info Number of shared dependencies: 0
=> Found "babel-runtime#[email protected]"
info This module exists because "@storybook#addon-actions#react-inspector#babel-runtime" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "@nuxt/babel-preset-app#[email protected]"
info This module exists because "nuxt#@nuxt#webpack#@nuxt#babel-preset-app" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "@vue/babel-preset-app#[email protected]"
info This module exists because "vuepress#@vuepress#core#@vue#babel-preset-app" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "@babel/runtime-corejs2#[email protected]"
info This module exists because "vuepress#@vuepress#core#@vue#babel-preset-app#@babel#runtime-corejs2" depends on it.
info Disk size without dependencies: "7.68MB"
info Disk size with unique dependencies: "7.68MB"
info Disk size with transitive dependencies: "7.68MB"
info Number of shared dependencies: 0
=> Found "fbjs#[email protected]"
info This module exists because "@storybook#addon-links#@storybook#router#@reach#router#create-react-context#fbjs" depends on it.
info Disk size without dependencies: "4.37MB"
info Disk size with unique dependencies: "4.37MB"
info Disk size with transitive dependencies: "4.37MB"
info Number of shared dependencies: 0
✨ Done in 1.25s.So I use the same approach provided by @frebro, try $ yarn add -D [email protected]and 🎉 : I get a working environment: |
|
@rwam yarn add -D [email protected] works for me in my storybook 5.2.5 HTML project thx dude :) |
Vue with @vue/cli migratingabout error:if ERROR in ./.storybook/config.js
Module not found: Error: Cannot find module 'core-js/modules/web.dom.iterable'if // many errors from storybook and addons
Cannot find module 'core-js/modules/***'about deps:"@vue/cli*": "^4.0.5", depends on 'core-js': '^3.*.*'
"@vue/cli*": "^3.*.*", depends on 'core-js': '^2.*.*'
"@storybook/vue": "^5.1.0", depends on 'core-js': '^3.*.*' with d.ts
"@storybook/vue": "^5.0.6", depends on 'core-js': '^2.*.*' but without d.tsmy working deps: "@vue/cli*": "^4.0.5", depends on 'core-js': '^3.*.*'
"@storybook/vue": "^5.1.0", depends on 'core-js': '^3.*.*' with d.tshttps://cli.vuejs.org/migrating-from-v3/#migrating-from-v3 Health to you and your loved ones;) |
|
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: yarn add --dev core-js@3 @babel/runtime-corejs3export default {
…
build: {
babel: {
presets() {
return [
[
'@nuxt/babel-preset-app',
{
corejs: { version: 3 }
}
]
]
}
}
}
}I came across this solution because I couldn't update nuxt to latest stable. |
|
I faced the same issue when trying to add storybook(5.3.18) to gatsby v2 when at lease one component was using static queries. Moving .babelrc to .storybook worked as suggested by @brycehill . |
Awesome, worked for me! |
|
@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 |
|
Next.js 9.1.1 -> Next.js 9.4.4 tripped me up. Comparing the results of |
|
cc @ndelangen |
|
Same issue with the version 5.3.19 while dealing with the migration from core-js v2 to v3 |
|
Same issue for me. Like @denimamab I'm using version |
|
Fixed it locally with: Now npm run storybook works |
|
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. ReferencePutting all this in one place since, cuz. 😅 Existing `.babelrc` at project root{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-transform-modules-commonjs",
"@babel/plugin-transform-object-assign",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-transform-runtime"
],
"sourceRoot": "./"
}Root `.browserslistrc`Relevant (mostly) `package.json`"scripts": {
"build:storybook": "build-storybook --quiet -o ./dist/storybook",
"storybook": "start-storybook -p 6006"
},
"dependencies": {
"@babel/core": "7.3.4",
"@babel/plugin-proposal-class-properties": "7.3.4",
"@babel/plugin-proposal-optional-chaining": "7.7.5",
"@babel/plugin-transform-modules-commonjs": "7.2.0",
"@babel/plugin-transform-object-assign": "7.2.0",
"@babel/plugin-transform-runtime": "7.6.2",
"@babel/polyfill": "7.2.5",
"@babel/preset-env": "7.3.4",
"@babel/preset-react": "7.0.0",
"babel-loader": "8.0.6",
"react": "16.10.2",
"react-dom": "16.10.2",
"webpack": "4.43.0",
"webpack-cli": "3.3.11"
},
"devDependencies": {
"@storybook/addon-a11y": "5.3.19",
"@storybook/addon-actions": "5.3.19",
"@storybook/addon-docs": "5.3.19",
"@storybook/addon-knobs": "5.3.19",
"@storybook/addon-links": "5.3.19",
"@storybook/addons": "5.3.19",
"@storybook/react": "5.3.19",
"@storybook/source-loader": "5.3.19",
"acorn": "7.2.0",
"storybook-design-token": "0.7.3",
"webpack-dev-server": "3.10.3"
}System InfoProject Status and Prerequisites
Early Fix AttemptsMost of my early attempts at fixing the issue revolved around trying to set options in the root Final SolutionWhile being initially hesitant to try using a custom 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 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 ConclusionIf 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. 👋 |
and others
Describe the bug
Storybook doesn't compile after upgrading
core-jsto 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:
core-jsversion 3.0 or highercorejs: { version: 3 },in@babel/envoptionsSystem:
The text was updated successfully, but these errors were encountered: