Storybook: Storybook v5 breaks when using core-js ^3.0

[ilyaulyanov]

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: [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
• Version: 5.0.3

[eddiemonge]

Storybook is using core-js incorrectly somehow. @babel/preset-env version 7.4.1 upgraded to core-js@3 and it broke my Storybook react app when running tests

[eddiemonge]

client-api looks like it should have core-js@2 as a dependency since the generated core requires it

[lumio]

Although it says it is fixed with 5.0.4 and 5.0.5, I still get this error.

How to reproduce:
Install @storybook/cli and init package. Then init storybook with npx -p @storybook/cli sb init --type react.

➜  my-prj npx -p @storybook/cli sb init --type react
npx: installed 404 in 11.526s

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

[BABEL] Note: The code generator has deoptimised the styling of /Users/lumio/.npm/_npx/74147/lib/node_modules/@storybook/cli/node_modules/lodash/lodash.js as it exceeds the max of 500KB.

 sb init - the simplest way to add a storybook to your project.

 • Installing Storybook for user specified project type. ✓
 • Adding storybook support to your "React" app. ✓
 • Preparing to install dependencies. ✓


> [email protected] install ./my-prj/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "./my-prj/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

added 1160 packages from 900 contributors in 23.386s

 • Installing dependencies. ✓

To run your storybook, type:

   npm run storybook

For more information visit: https://storybook.js.org

➜  my-prj nvim .
➜  my-prj yarn storybook
yarn run v1.15.2
$ start-storybook -p 6006
info @storybook/react v5.0.5
info
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Using default webpack setup.
info => Using base config because react-scripts is not installed.
 10% building 5/8 modules 3 active ...j/node_modules/querystring-es3/index.js
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

 11% building 13/18 modules 5 active ...my-prj/node_modules/strip-ansi/index.js
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

webpack built 896edc3c5271d2618768 in 4031ms
╭──────────────────────────────────────────────────╮
│                                                  │
│   Storybook 5.0.5 started                        │
│   4.71 s for manager and 4.48 s for preview      │
│                                                  │
│   Local:            http://localhost:6006/       │
│   On your network:  http://10.52.40.112:6006/    │
│                                                  │
╰──────────────────────────────────────────────────╯

[shilman]

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

[lumio]

Got it! Thanks!

[jessy1092]

I upgrade storybook version to 5.0.6 and it solved this problem.

[shilman]

@jessy1092 Great to hear it. I'm closing this for now. If anybody runs into this problem again I'll reopen.

[christophehurpeau]

Hello,
It doesn't seems to work for me, even with storybook 5.1.0-alpha.18

Here a reproducible repo: https://github.com/christophehurpeau/cra-rest-hooks-storybook

yarn install
yarn storybook

I hope this helps

[shilman]

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

[artursvonda]

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.

[christophehurpeau]

@shilman also tried 5.0.6, same result (https://github.com/christophehurpeau/cra-rest-hooks-storybook/tree/storybook-5.0.6)

[christophehurpeau]

@artursvonda I'm not using core-js v3, a dependency uses it. I don't have node_modules/@storybook/core/node_modules/core-js because v2 is the one used by both react-scripts and @storybook/core, deduped in node_modules. Only the dependency using core-js 3 doesnt find core-js

[christophehurpeau]

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;
};

[ntucker]

wow. aliases are scary. why is storybook using them?

[shilman]

cc @ndelangen

[zjaml]

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

[saintplay]

can confirm,

// In some story or dependency of a story
import firebase from "firebase/app"

in a fresh cra2 and sb init crashes

[jrose-carecloud]

Same issue for me. Going back to firebase version 4.12.1 worked but its over a year old and isn't a good solution.

[parkerholladay]

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 [email protected] with [email protected] and adding this to .storybook/webpack.config.js solved the issue.

[parkerholladay]

I just saw firebase had an update to 5.10.0 and also upgraded storybook to 5.0.10, and I was able to remove the alias "hack" above.

[zjaml]

unfortunately updating both firebase and storybook to the latest didn't fix my problem.
I have to stop using storybook for this issue.

[shilman]

@zjaml did you try @parkerholladay 's workarounds above?

[zjaml]

@shilman about that, I don't know in which file I should do it.

[shilman]

@zjaml That's .storybook/webpack.config.js. Please let me know if it works for you!

[zjaml]

@shilman it works that way! Thanks!

[sarod]

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

[ndelangen]

Should we delete the alias from the preview's webpack.config?

maybe even all aliases?

[throrin19]

Same problem here, the remove alias don't fix the problem for me :(

[lauterry]

Same issue for me. Removing the alias does not fix the issue

[ndelangen]

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!

[leepowelldev]

Same issue here - ours is breaking with react-app-polyfill though which has been updated to use core-js version 3. Rolling back on that to version 0.2.2 for now.

[rchan]

confirming this fix worked for me too, [email protected] and [email protected]

added the file ./storybook/webpack.config.js with the above

[daviscabral]

~sorry - @storybook/[email protected] does not seems released - was it intentional?~

EDIT: Sorry - ended finding the answer in other issue. https://github.com/storybooks/storybook/issues/5893

Workaround
Use the next version of the CLI / React native to get 5.1.0-alpha.x:

npx -p @storybook/cli@next sb init --type react_native

[brycehill]

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

[stale[bot]]

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!

[jdhayford]

^ To my knowledge this is still very much an issue and should not be marked inactive

[shilman]

@jdhayford AFAIK this is fixed in 5.1, which is slated for release in a few days

[jdhayford]

@shilman That's great! Thank you and thanks to the contributors 👍

[ByDesignGit]

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

[ChandanPHAI]

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

[ChandanPHAI]

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.

[Areximacha]

I also encountered the same issue. However, I believe it is now the opposite of the original issue where a previous package installed an older version of core-js (2.6.9) as a dependency and now storybook requires core-js@3.
Interim fixed using @ChandanPHAI solution and also waiting on a proper fix.

[ByDesignGit]

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

[Piotr-Musial]

Same thing here:

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.for-each' in '/indio-ui/.storybook'
 @ ./.storybook/config.js 1:0-43
 @ 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

Deleting the alias didn't work for me. But I installed npm i core-js -D as @ChandanPHAI suggested, and it worked 👌

Waiting for the proper fix as well.

[arvenz0210]

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

[jhoffmcd]

@arvenz0210 @ByDesignGit doesn't that mean you now have to maintain two .babelrc files? Seems undesirable.

[wickkidd]

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

[thatguynamedandy]

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.

[jhoffmcd]

Using @storybook/react": "^5.1.1" and still getting this issue with a fresh npm install. I suspect @ChandanPHAI is correct, I have other dependancies that have installed v2 of the core-js package.

[ndelangen]

This PR is did today should fix this, @shilman will do a new release testing this soon: #7051

[Kosai106]

Still happening with "@storybook/react": "^5.1.3" - Installing core-js --dev fixed the issue on my end.

[ChandanPHAI]

anyone facing issue https://github.com/storybookjs/storybook/issues/7021 ??

[shilman]

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.

[DonikaV]

@shilman just updated, and same errors... :(

Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator'

[ChandanPHAI]

@shilman I updated the storybook and addons to the latest version.

Still getting the errors related to core-js.

installing npm i core-js -D fix the issue locally.

without core-js library it's not working.

[ndelangen]

Are you importing babel-polyfill anywhere in your code? If so, try removing that?

[ndelangen]

Here's how I fixed the repro branch that I got:
https://github.com/umakantp/demo-repro/pull/1

Please please send me more repro repos to me via any channel, so I can fix the issue.

@ChandanPHAI @DonikaV

[DonikaV]

@ndelangen hi, i dont have babel-polyfill in my folder. I cannot show you more. It is private repo.
storybook and all addons was updated.

[joanntaguinod]

Hi, experiencing the same issue with core-js even on 5.1.4. Manuall installing core-js as dev dependency didn't work either.

[ndelangen]

I'm working on this, new release within 24h!

[shilman]

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.

[filippoitaliano]

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;
};

[aga5tya]

@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

[shilman]

cc @igor-dv @libetl ☝️

[filippoitaliano]

@aga5tya Yeah you hit the problem. I've exclude node_modules and everything works fine!

[borisdiakur]

I had to:

• [x] update all @storybook/* dependencies
• [x] add "corejs": 3 to my .babelrc
• [x] run yarn add corejs@3
• [x] add exclude: /node_modules/, to my webpack.config.js
• [x] remove import 'babel-polyfill' from my app.js

[libetl]

babel polyfill is deprecated and must be replaced by core-js everywhere

[ljharb]

or airbnb-browser-shims :-p

either way, node_modules should always be excluded from transpilation.

[flowck]

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.

[ndelangen]

@flowck please install core-js v3 into your project root

[ljharb]

Can we find a way to use storybook without any core-js in use at all? Why can’t consumers provide their own shims?

[chadlavi-casebook]

babel-polyfills is a dep of a library I have to use. How can I get storybook to run in this case?

[antoniojps]

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.

[ndelangen]

@chadlavi-casebook uhm, you could try adding an webpack ignore plugin I guess?
https://webpack.js.org/plugins/ignore-plugin/

[frebro]

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

=> Found "[email protected]"
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#[email protected]"
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#[email protected]"
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#[email protected]"
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#[email protected]"
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.

[Laslo89]

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

[JamyGolden]

I have this issue after upgrading to v5.1.9 from v5.0.6.

[Exomnius]

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

[ndelangen]

@JamyGolden & @Exomnius could you please share more about your setup?

the output of yarn why core-js is helpful, a reproduction repo is even more so.

[JamyGolden]

@ndelangen I've upgraded to 5.1.9 without problems now, I guess a new patch dependency has been installed and has solved the issue 🤷‍♀️

Edit, had to downgrade again, failing CI tests. I did a yarn why core-js on that:

$ 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#react#core-js"
   - Hoisted from "@storybook#addon-actions#core-js"
   - Hoisted from "@storybook#addon-links#core-js"
   - Hoisted from "@storybook#addon-storyshots#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#api#core-js"
   - Hoisted from "@storybook#react#@storybook#core#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#core-events#core-js"
   - Hoisted from "@storybook#addon-storyshots#@storybook#addons#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#core-js"
   - Hoisted from "@storybook#react#@storybook#node-logger#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#router#core-js"
   - Hoisted from "@storybook#addon-storyshots#@storybook#addons#@storybook#channels#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#channel-postmessage#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#client-api#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#ui#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#@storybook#client-logger#core-js"
   - Hoisted from "@storybook#react#@storybook#core#lazy-universal-dotenv#core-js"
   - Hoisted from "@storybook#addon-actions#@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 "protractor-flake#[email protected]"
info This module exists because "protractor-flake" depends on it.
info Disk size without dependencies: "3.45MB"
info Disk size with unique dependencies: "3.45MB"
info Disk size with transitive dependencies: "3.45MB"
info Number of shared dependencies: 0
=> Found "core-js-compat#[email protected]"
info This module exists because "@babel#preset-env#core-js-compat" depends on it.
info Disk size without dependencies: "6.63MB"
info Disk size with unique dependencies: "6.63MB"
info Disk size with transitive dependencies: "6.63MB"
info Number of shared dependencies: 0
=> Found "babel-runtime#[email protected]"
info This module exists because "social-tags-webpack-plugin#babel-runtime" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "node-plop#[email protected]"
info This module exists because "plop#node-plop" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "babel-polyfill#[email protected]"
info This module exists because "flow-typed#babel-polyfill" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "fbjs#[email protected]"
info This module exists because "@storybook#addon-actions#@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
✨  Done in 1.94s.

[ndelangen]

You got it working locally, but the CI still had the same error?

[JamyGolden]

@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 1.15.2, node 8.15.1), we're using a lockfile too. The above was the failing yarn why core-js and this is mine:

yarn why core-js
yarn why v1.15.2
warning ../package.json: No license field
[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#react#core-js"
   - Hoisted from "@storybook#addon-actions#core-js"
   - Hoisted from "@storybook#addon-links#core-js"
   - Hoisted from "@storybook#addon-storyshots#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#components#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#api#core-js"
   - Hoisted from "@storybook#react#@storybook#core#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#core-events#core-js"
   - Hoisted from "@storybook#addon-storyshots#@storybook#addons#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#core-js"
   - Hoisted from "@storybook#react#@storybook#node-logger#core-js"
   - Hoisted from "@storybook#addon-links#@storybook#router#core-js"
   - Hoisted from "@storybook#addon-storyshots#@storybook#addons#@storybook#channels#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#channel-postmessage#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#client-api#core-js"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#ui#core-js"
   - Hoisted from "@storybook#addon-actions#@storybook#theming#@storybook#client-logger#core-js"
   - Hoisted from "@storybook#react#@storybook#core#lazy-universal-dotenv#core-js"
   - Hoisted from "@storybook#addon-actions#@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 "protractor-flake#[email protected]"
info This module exists because "protractor-flake" depends on it.
info Disk size without dependencies: "3.45MB"
info Disk size with unique dependencies: "3.45MB"
info Disk size with transitive dependencies: "3.45MB"
info Number of shared dependencies: 0
=> Found "core-js-compat#[email protected]"
info This module exists because "@babel#preset-env#core-js-compat" depends on it.
info Disk size without dependencies: "6.63MB"
info Disk size with unique dependencies: "6.63MB"
info Disk size with transitive dependencies: "6.63MB"
info Number of shared dependencies: 0
=> Found "babel-runtime#[email protected]"
info This module exists because "social-tags-webpack-plugin#babel-runtime" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "node-plop#[email protected]"
info This module exists because "plop#node-plop" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "babel-polyfill#[email protected]"
info This module exists because "flow-typed#babel-polyfill" depends on it.
info Disk size without dependencies: "7.66MB"
info Disk size with unique dependencies: "7.66MB"
info Disk size with transitive dependencies: "7.66MB"
info Number of shared dependencies: 0
=> Found "fbjs#[email protected]"
info This module exists because "@storybook#addon-actions#@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
✨  Done in 2.85s.

An example of the same error which exists on every assertion:

FAIL path/to/test/index.spec.js
  ● Test suite failed to run

    Cannot find module 'core-js/modules/es6.symbol' from 'localMocksFile.js'

[ndelangen]

aha, so storybook is running OK, but a test is still using an old core-js version!

What's inside localMocksFile.js? Likely all you need to do is update that 1 file.

[JamyGolden]

@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 yarn storybook contains a lot of similar errors, seemingly an error on every file:

Entrypoint main [big] = runtime~main.78e9af38499895fecc3d.bundle.js runtime~main.78e9af38499895fecc3d.bundle.js.map vendors~main.78e9af38499895fecc3d.bundle.js vendors~main.78e9af38499895fecc3d.bundle.js.map main.78e9af38499895fecc3d.bundle.js main.78e9af38499895fecc3d.bundle.js.map
[0] 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 64 bytes {main} [built]
[./.storybook/config.js] 368 bytes {main} [built]
[./app sync recursive \.stories\.(js|jsx)$] ./app sync \.stories\.(js|jsx)$ 5.07 KiB {main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/client/index.js] 1.26 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 251 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/mockdate/src/mockdate.js] 1.78 KiB {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/regenerator-runtime/runtime.js] 23 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true] 7.68 KiB {vendors~main} [built]
    + 1352 hidden modules

ERROR in ./app/helpers/device.js
Module not found: Error: Cannot find module 'core-js/modules/es6.regexp.match'
 @ ./app/helpers/device.js 1:0-42 1:42-84
 @ ./app/helpers/index.js
 @ ./app/components/Button/index.js
 @ ./app/components/Button/__tests__/index.stories.js
 @ ./app sync \.stories\.(js|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 ./node_modules/webpack-hot-middleware/client.js?reload=true
...

Not sure if this is helpful info, but @babel/polyfill isn't included in the primary package.json in the project.

[jondotblack]

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.

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"
  }

[RichardPK]

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/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected]

[kfayelun]

Im seeing the samme issue when I try to run storybook:
ERROR in ./src/lib/helpers.js Module not found: Error: Cannot find module 'core-js/modules/web.dom.iterable' @ ./src/lib/helpers.js 16:0-43 @ ./src/components/Person.js @ ./src/components/Person.stories.js @ ./src sync \.stories\.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 (webpack)-hot-middleware/client.js?reload=true&quiet=true

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.

[rwam]

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 "[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: yarn storybook, yarn build and all other tasks are working again.

[remytesta]

@rwam yarn add -D [email protected] works for me in my storybook 5.2.5 HTML project thx dude :)

[NikitaIT]

Vue with @vue/cli migrating

about error:

if 'core-js': '^3.*.*':

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

if 'core-js': '^2.*.*':

// 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.ts

my working deps:

"@vue/cli*": "^4.0.5", depends on 'core-js': '^3.*.*'
"@storybook/vue": "^5.1.0", depends on 'core-js': '^3.*.*' with d.ts

https://cli.vuejs.org/migrating-from-v3/#migrating-from-v3
if Invalid Option: corejs is not a valid top-level option: -rm -rf node_modules.

Health to you and your loved ones;)

[rwam]

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.

[masives]

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 .

[allozaur]

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.

Awesome, worked for me!

[alrayyes]

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

[jmayergit]

Next.js 9.1.1 -> Next.js 9.4.4 tripped me up.

Comparing the results of npm list core-js revealed that a babel runtime of core js was missing after updating Next. I re-installed this missing package in the dev dependencies and LO and Behold it worked

[shilman]

cc @ndelangen

[denimamab]

Same issue with the version 5.3.19 while dealing with the migration from core-js v2 to v3

[drewrwilson]

Same issue for me. Like @denimamab I'm using version 5.3.19

[martinmdev]

Fixed it locally with:
rm ./package-lock.json
rm -rf ./node_modules
npm install

Now npm run storybook works

[Smolations]

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