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:

  1. Install core-js version 3.0 or higher
  2. Have corejs: { version: 3 }, in @babel/env options
  3. Try running storybook server
  4. 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

Most upvoted comments

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:


ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/array/find' in '/Users/jin/kinyapp/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/@firebase/polyfill/dist/index.esm.js 3:0-37
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/firebase.js
 @ ./src/components/Login.js
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/array/find-index' in '/Users/jin/kinyapp/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/@firebase/polyfill/dist/index.esm.js 4:0-43
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/firebase.js
 @ ./src/components/Login.js
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/object/assign' in '/Users/jin/kinyapp/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/@firebase/polyfill/dist/index.esm.js 5:0-40
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/firebase.js
 @ ./src/components/Login.js
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ah so it works when I delete the alias:

module.exports = ({ config, mode }) => {
  console.log(config.resolve.alias);
  delete config.resolve.alias['core-js'];
  return config;
};

Had the same issue running @storybook/vue 5.1.9. Running yarn why core-js turned out this:

=> Found "core-js@3.1.4"
info Has been hoisted to "core-js"
info Reasons this module exists
   - "workspace-aggregator-20eaddfd-71c7-48bf-a12d-ecca73d8226d" depends on it
   - Hoisted from "_project_#@storybook#addon-knobs#core-js"
   - Hoisted from "_project_#@storybook#addon-viewport#core-js"
   - Hoisted from "_project_#@storybook#vue#core-js"
   - Hoisted from "_project_#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#addons#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#client-api#core-js"
   - Hoisted from "_project_#@storybook#addon-viewport#@storybook#client-logger#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#components#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#core-events#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#theming#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#addons#@storybook#api#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#@storybook#channel-postmessage#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#addons#@storybook#channels#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#@storybook#node-logger#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#client-api#@storybook#router#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#@storybook#ui#core-js"
   - Hoisted from "_project_#@storybook#vue#@storybook#core#lazy-universal-dotenv#core-js"
   - Hoisted from "_project_#@storybook#addon-knobs#@storybook#components#simplebar-react#simplebar#core-js"
info Disk size without dependencies: "6.69MB"
info Disk size with unique dependencies: "6.69MB"
info Disk size with transitive dependencies: "6.69MB"
info Number of shared dependencies: 0
=> Found "@vue/babel-preset-app#core-js@2.6.9"
info This module exists because "_project_#@vue#cli-plugin-babel#@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#core-js@2.6.9"
info This module exists because "_project_#@vue#cli-plugin-babel#@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#core-js@1.2.7"
info This module exists because "_project_#@storybook#addon-knobs#@storybook#components#recompose#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
=> Found "babel-runtime#core-js@2.6.9"
info This module exists because "_project_#@storybook#addon-knobs#@storybook#components#react-syntax-highlighter#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

Adding core-js@^2.6.9 to devDependencies solved it for me.

ah so it works when I delete the alias:

module.exports = ({ config, mode }) => {
  console.log(config.resolve.alias);
  delete config.resolve.alias['core-js'];
  return config;
};

Also using firebase@5.9.4 with storybook@5.0.8 and adding this to .storybook/webpack.config.js solved the issue.

I have this issue after upgrading to v5.1.9 from v5.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:

Note: Since core-js@2 and core-js@3 are both supported from Babel 7.4.0, we recommend directly adding core-js and setting the version via the corejs option.

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-corejs3
export 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.

@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

{
test: /\.js$/,
exclude: /node_modules/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
}

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/modules is resolved to the version bundled with storybook

resolve: {
    alias: {
        'core-js/modules': path.resolve(
            __dirname,
            'node_modules/@storybook/core/node_modules/core-js/modules',
        ),
    }
}

Hacky solution but should be good enough for now.

Same issue. Fixed after downgrading from v5.1.9 to v5.0.6

Yee-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. 👍

  • didn’t need to move my babel.config.js
  • didn’t need to add/remove anything from my webpack config (I’m using https://github.com/storybookjs/vue-cli-plugin-storybook v0.6.1 so my webpack config is partly generated by vue-cli with a little bit of unrelated stuff I added via vue.config.js which vue-cli merges in with the dynamically generated webpack config.)
  • didn’t need to add/remove any references to core-js, aliases, or deps that depend on core-js, etc…

I am still facing the same issue. @ByDesignGit Can you please explain how were you able to fix it ?

i solved it by moving my .babelrc into my .storybook

This issue is still happening but was able to fix it using @brycehill solution

Deleting the alias didn’t work for me. However, I was able to workaround this by moving our babel file into .storybook

Deleting the alias didn’t work for me. However, I was able to workaround this by moving our babel file into .storybook

This 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:

yarn remove @storybook/react @storybook/addon-actions @storybook/addon-knobs @storybook/addon-links @storybook/addon-notes @storybook/addons @storybook/addon-storyshots 

Followed by:

yarn add @storybook/react@5.0.6 @storybook/addon-actions@5.0.6 @storybook/addon-knobs@5.0.6 @storybook/addon-links@5.0.6 @storybook/addon-notes@5.0.6 @storybook/addons@5.0.6 @storybook/addon-storyshots@5.0.6

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-knobs addon.

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:

ERROR in ./src/components/list/VirtualizedList.jsx
Module not found: Error: Cannot find module 'C:\ProjectDirectory\node_modules\@storybook\addon-storysource\loader.js!C:\ProjectDirectory\node_modules\core-js\modules\web.dom-collections.iterator.js'
 @ ./src/components/list/VirtualizedList.jsx 19:0-54
 @ ./src/components/list/index.js
 @ ./src/components/list/List.story.jsx
 @ ./src/components sync story\.jsx?$
 @ ./.storybook/config.js
 @ 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

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:

const path = require('path');
const { DefinePlugin } = require('webpack');

const buildTimeConfig = require('../buildTimeConfig');

const resolveLocalDirectory = relativePath => path.resolve(__dirname, '../', relativePath);

module.exports = async ({ config }) => {
  config.resolve.extensions.push('.jsx');
  config.resolve.extensions.push('.json');

  config.plugins.push(
    new DefinePlugin({
      SUPPORTED_LOCALES: `'${buildTimeConfig.REQUIRED_LOCALES}'`,
    }),
  );

  config.resolve.alias = {
    $components: resolveLocalDirectory('src/components'),
  };

  config.module.strictExportPresence = true;

  config.module.rules.push({
    test: /\.jsx?$/,
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    enforce: 'pre',
  });

  // Unsafe override of css-modules rule for the following
  // https://github.com/storybooks/storybook/issues/6083.
  config.module.rules[2] = {
    oneOf: [
      {
        test: /\.module\.(scss|css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              localsConvention: 'camelCaseOnly',
              importLoaders: 1,
              modules: {
                localIdentName: '[local]_[hash:5]',
              },
              sourceMap: true,
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /(?<!\.module)\.(scss|css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.json$/,
        include: /node_modules\/emoji-dictionary/,
        loader: 'json-loader',
      },
      {
        exclude: /\.(js|jsx|ejs|html|json|md)$/,
        loader: 'file-loader',
        options: { name: 'assets/[name].[ext]' },
      },
    ],
  };

  return config;
};

Still happening with "@storybook/react": "^5.1.3" - Installing core-js --dev fixed 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
{
  "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`
last 2 versions
> 1%
IE >= 11
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 Info
  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.0.2 - /usr/local/bin/bash (via homebrew)
  Binaries:
    Node: 10.18.0
    npm: 6.13.4
  Browsers:
    Chrome: 86.0.4240.193
    Firefox: 80.0.1
    Safari: 14.0

Project Status and Prerequisites

  • i have an outstanding, separate change to upgrade all [my team’s] webpack/babel packages (babel is v7.x.x in my change and in the separate change), but it hasn’t made it out of testing yet due to our ie11 test infrastructure. the change introduces corejs version 3 as a dependency and useBuiltIns: 'usage', where previously we were using a manual import of @babel/polyfill and the default for useBuiltIns. 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.
  • i have another outstanding change, based on the branch that updates webpack/babel packages, which upgrades our storybook version from v5.3.19 to the newest v6.x.x. i have not tried to repro this bug in that branch as i assume everything will be fine) my reason for which is described below.
  • current project has a root .babelrc (seen above) for the main app. this config uses @babel/preset-env and uses a root .browserslistrc (seen above) to determine polyfill usage. no .storybook/.babelrc is present in our app’s mainline branch.
  • we use storybook for internal developer documentation only. since the org mainly uses chrome as our default browser, polyfills are unnecessary. this revelation actually contributed to the final solution.
  • i am using a custom storybook webpack config, but only to add extra rules around fonts/images. i abandoned the attempt to modify the core rules around .js processing for reasons outlined in this storybook issue.
  • I AM ONLY EXPERIENCING THIS ISSUE WHEN GENERATING THE STATIC STORYBOOK SITE. running via the included dev-server for local development encounters no issues.

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 the build-storybook tool) how i want the transpilation to occur. No configuration of useBuiltIns, 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 .babelrc via the extends property 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 undefined in 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-env preset in the new .storybook/.babelrc altogether. HUZZAH, problem solved! The original config needed to persist for the app, however, so I renamed to .storybook/.babelrc-ci and 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 -ci suffix 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/polyfill and 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 like es.array.iterator while v2 provides modules like es6.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/vue 5.2.5 besides of Nuxt.js v2.10.1 and had the same issue: yarn storybook works, but yarn build or any other nuxt related task failed. yarn why core-js provides the following output:

$ 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 "core-js@3.3.3"
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#core-js@2.6.10"
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#core-js@2.6.10"
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#core-js@2.6.10"
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#core-js@2.6.10"
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#core-js@1.2.7"
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 core-js@2.6.10

and 🎉 : I get a working environment: yarn storybook, yarn build and all other tasks are working again.

I am having the following error:

ERROR in ./.storybook/config.js Module not found: Error: Cannot find module ‘core-js/modules/web.dom.iterable’

I am using storybook/vue 5.1.9.

Screen Shot 2019-06-22 at 7 26 48 PM

Solved by installing https://www.npmjs.com/package/babel-loader

package.json

  "dependencies": {
    "babel-loader": "^8.0.6"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^5.1.11",
    "@storybook/addon-links": "^5.1.11",
    "@storybook/addons": "^5.1.11",
    "@storybook/react": "^5.1.11"
  }

Make sure to delete your node_modules at first. rm -rf node_modules

I’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.

//  console.log(config.resolve.alias);
{
  'babel-runtime/core-js/object/assign': '/Development/canopy/node_modules/@storybook/core/node_modules/core-js/es/object/assign.js',
  react: '~/Development/canopy/node_modules/react',
  'react-dom': '/Development/canopy/node_modules/react-dom'
}

All revisions at 5.1.1.

   "@storybook/addon-actions": "^5.1.1",
    "@storybook/addon-knobs": "^5.1.1",
    "@storybook/addon-notes": "^5.1.1",
    "@storybook/addon-viewport": "^5.1.1",
    "@storybook/addons": "^5.1.1",
    "@storybook/angular": "^5.1.1",

Apologies I haven’t had the time to debug any further.

I am still facing the same issue. @ByDesignGit Can you please explain how were you able to fix it ?

i solved it by moving my .babelrc into my .storybook

This issue is still happening but was able to fix it using @brycehill solution

Deleting the alias didn’t work for me. However, I was able to workaround this by moving our babel file into .storybook

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

"useBuiltIns": "usage",
"corejs": {version: 3},

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.

@christophehurpeau Any chance you can try out 5.0.6 for me? Re-opening this. 😭

@lumio That’s not an error, it’s a warning. It’s fixed in 5.1.0-alpha.16 and I’ll release the fix to latest after it’s been out for a few days if nobody complains.