storybook@6 throws a core-js error

[43081j]

With storybook 6, my very basic typescript setup throws errors about core-js polyfills every time.

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

this is thrown from 'generated-stories-entry'. i can see earlier in the webpack output that the polyfill was built:

[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]

which afaik is where you include core-js.

with storybook 5, this works just fine. its a clean setup from today, npm i -D @storybook/html (5 or 6) and this config:

module.exports = {
  stories: ['../src/**/*.stories.ts'],
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.ts$/,
      use: [
        {loader: require.resolve('ts-loader')}
      ]
    });
    config.resolve.extensions.push('.ts');
    return config;
  }
};

I think this is because there are multiple core-js versions in my node_modules and storybook is resolving the wrong one (somehow). if i look at the one inside storybook's packages, its got the right files.

this isn't something i should have to 'fix' though IMO, as so many dependencies use core-js it seems like a very likely situation for many to bump into. my guess is you can fix it by installing core-js as a direct dependency but thats also far from ideal.

EDIT:

Temporary workaround

If you've come across this issue while searching, we do not yet have a solution merged in (this issue will close when we do). However, there is a workaround: simply install core-js@3 as a direct dependency (npm i -D core-js@3).

If that doesn't work for you, please do comment so we are aware in case there are some other edge cases.

[shilman]

cc @ndelangen

[gerdy]

I have the same problem. I set a breakpoint on the webpackFinal method, but it did not trigger. I suspect that the change here caused this problem, which was good before 6.0.0 beta14.

[ndelangen]

ERR! Module not found: Error: Can't resolve 'chromatic/isChromatic' in '/node_modules/@storybook/ui/dist/components/layout' (node:11596) UnhandledPromiseRejectionWarning: ModuleNotFoundError: Module not found: Error: Can't resolve 'chromatic/isChromatic' in '/node_modules/@storybook/ui/dist/components/layout'

whut? I'm really confused.. the preview is bundling code for the manager.. and it's missing a devDependency..This makes very little sense..

[ben-reitz]

And as @43081j suggests, adding core-js v3 as a dev dependency fixes it but that doesn't seem like a great solution...

[kevinkuebler]

I just ran into the same issue trying to update my storybook from 5.2.5 to 6.0.0-rc.9. Like @BWrites I added the latest core-js as a dev dependency and that fixed it, but I agree that it's not a great solution.

[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!

[43081j]

just a reminder that now that you published 6.0 officially, this is still a problem.

it is very awkward having to install core-js directly in each repo we use storybook for. do you have any suggested fix on your end for this? anything we can contribute to help?

[shilman]

@43081j I don't think we understand the problem. Perhaps @ndelangen can share some of his wisdom here.

[43081j]

essentially, storybook's generated output tries to require core-js for various polyfills.

im guessing because it is generated output and doesn't "live" in the storybook directory (node_modules/@storybook), it will resolve the first available core-js from the top level rather than resolving it relative to storybook's directory.

so if you have storybook in a project which already has a different version of core-js (not necessarily as a direct dependency, all sorts of other projects also depend on core-js), that one may be required by accident rather than the one storybook wants.

this means the paths fail to resolve if the two core-js versions are drastically different.

the workaround (npm i -D core-js) solves the problem because then your top-level core-js is the same version as the one storybook wants. the older version will have then been moved deeper to live alongside whatever was requiring it.

[shilman]

@43081j would you be available to pair with @ndelangen on this?

[MattFisher]

Also having this problem.

Based on https://github.com/storybookjs/storybook/issues/6204#issuecomment-478992364, I added this to my config and it's resolving correctly now:

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

Note that this is pointing to the root node_modules/core-js folder in my project, not to one that's bundled with anything else.

[43081j]

@shilman ill see if i get some free time at the weekend and will try debug it a bit at least. it'll be to do with the webpack config i guess and where it resolves modules from

my guess is we effectively run webpack from the project directory. then when we generate our webpack entry, somewhere down the tree we must require core-js. but by that point, webpack's CWD is the project dir rather than storybook's dir, so it will pick up whatever the root core-js version is instead of the one storybook wants.

we could do whats in the previous comment but use the path to storybook's core-js explicitly. but it seems a real shame and a bit hacky since this exact problem could happen with any number of dependencies in theory.

[mrtwinkler]

Same here. Just set up a clean project with vue-cli, added storybook and storybook-docs. npm run storybook results in lots of Module not found: Error: Can't resolve 'core-js/modules/....

[pmunin]

same here. Updating storybook from 5.3. to 6.0.12 - lead to bunch of errors like Can't resolve 'core-js/modules/web.dom-collections.iterator'

[kurt-unleashed]

Same here, even with the workaround :(

[endreujhelyi]

same got a bunch of error like Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator' Module not found: Error: Can't resolve 'core-js/modules/es.symbol.iterator'

[awkale]

Also having this problem.

Based on #6204 (comment), I added this to my config and it's resolving correctly now:

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

Note that this is pointing to the root node_modules/core-js folder in my project, not to one that's bundled with anything else.

@MattFisher which config file?

[mayoyml]

@awkale main.js :)

[43081j]

i think the ultimate solution is that we setup the webpack config to map to the right core-js when we produce a build. but im not entirely sure where that currently happens as there's a lot of dynamic magic going on, generation of bundles etc.

if someone can point me in the right direction im happy to go figure it out and pr it.

[shilman]

@ndelangen please work with @43081j on this 🙏

[ndelangen]

I originally wrote https://github.com/ndelangen/corejs-upgrade-webpack-plugin to 'solve' this issue.

But I deprecated it, because it just adds other problems, see: https://github.com/storybookjs/storybook/issues/7445 and https://github.com/ndelangen/corejs-upgrade-webpack-plugin/issues/7

conflicting versions of corejs are the bane of my existence.

[ndelangen]

@43081j happy to chat about a solution to this, are you on the storybook discord? https://discord.gg/7yKH3EU

[43081j]

no worries ill get on discord soon, wasn't aware there was a storybook one :+1:

[kelly-tock]

similar issue, I already had core-js in my project, and upgrading to 3(which we've been meaning to do anyway) doesn't seem to fix this issue.

[kelly-tock]

is it just me, if I look at core-js repo, web.dom.iterable doesn't exist ATM?

[43081j]

@kelly-tock try match the exact version storybook depends on and see if that helps.

i think i found the issue now so we're just figuring out a fix, needs some discussion to make sure it doesn't happen again with another dependency.

for anyone who wants to follow my progress, my current draft (with investigation/explanation) is #12312

[kelly-tock]

tried pinning to 3.0.1, no luck, the filed doesn't seem to exist. inside of the installed storybook modules, core-js ends up being installed as 3.6.5, which also doesn't have this file. gonna follow this other thread for now. can't really upgrade.

[jefferscn]

 "webpackFinal": (config)=> {
    config.resolve.alias['core-js/modules'] =  path.resolve(
            __dirname,
            '..',
            'node_modules/@storybook/core/node_modules/core-js/modules'
        );
    return config;
  }

Adding code upside to main.js sovle my problem.

[Sharcoux]

I can confirm the solution of @jefferscn . I simplified with this, but it is the same:

config.resolve.alias['core-js/modules'] = '@storybook/core/node_modules/core-js/modules'

[codebymikey]

You should check your package.json or run npm ls core-js to see which version of core-js you're running.

If your package.json references core-js less than 3.0.1, then you probably need to remove it, and rerun your npm install.

[j0hnm4r5]

I was able to fix this by adding

"resolutions": {
    "**/core-js": "^3.6.5"
}

to my package.json, as described in #8267.

---

I was running into this problem on 6, downgraded to 5.3, hit another version of this issue after a while, then found & implemented the fix. I figured I might as well try the upgrade back to 6, and thankfully it still works.

All of the responses to add fields to the Webpack config did not work for me, but this obviously did.

I'm using Gatsby, and evidently there is one core-js@^2.4.0 dependency buried deep inside:

npm ls core-js

└─┬ gatsby@2.24.58
  ├── core-js@3.6.5  deduped
  └─┬ gatsby-cli@2.12.96
    └─┬ yurnalist@1.1.2
      └─┬ babel-runtime@6.26.0
        └──  core-js@^2.4.0

Adding the resolutions field does technically break the core-js dependency for that Gatsby / babel-runtime dependency (the tree now says UNMET DEPENDENCY next to core-js@^2.4.0), but I haven't seen an issue yet.

[shraddha-chadha]

I had the same issue with stroybook v6 + React + Typescript and this solved my issue

.storybook/main.js

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['babel-preset-react-app']
          }
        }
      ],
      include: path.resolve(__dirname, '../src'),
      exclude: /node_modules/,
    });
    return config;
  },
};

And .storybook/.babelrc { "presets": [ "babel-preset-react-app" ] }

And package.json "babel-preset-react-app": "^9.1.2",

[tomasklingen]

Problem for me was that I didn't match the @babel/preset-env option corejs property version to the correct one.

package.json: "core-js": "^3.6.5",

The solution: .babelrc (or wherever your babel config lives)

[
    "@babel/preset-env",
    {
        "corejs": "3.6.5", <- make sure this version is the same as core-js version installed!
        ...
    }
],

[sumcoding]

Hey, also running into this issue as well. I have a mono repo and import a lot of assets from a shared folder outside of the main storybook app's. I had to install core-js within that shared folder, not ideal (despite having it installed in the storybook folder) and now I am running into more issues.

A lot of my documentation is shared as well, so need to import mdx docs from there into the storybook app, this is resulting in errors as well because storybook seems to think that the shared folder should be where it imports resources from as it relates to those docs.

Error: Can't resolve '@storybook/addon-docs/blocks' in '../shared/.storybook/documentation/... (one of many)

main.js

stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|mdx)',
    path.resolve(__dirname, '../../shared/.storybook/documentation/**/*.stories.mdx')
  ],

[hydrosquall]

I can confirm the solution of @jefferscn . I simplified with this, but it is the same:

config.resolve.alias['core-js/modules'] = '@storybook/core/node_modules/core-js/modules'

Unfortunately this didn't work for me in a yarn 2 (berry) project, since the /node_modules/ folder is not directly accessible. My main application already specifies core-js as an explicit dependency

The error I looks like this:

 Error: Your application tried to access core-js, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

This issue may be related (but I'm not sure).

https://github.com/yarnpkg/berry/issues/947#issue-564792093

[kevinhaas]

 "webpackFinal": (config)=> {
    config.resolve.alias['core-js/modules'] =  path.resolve(
            __dirname,
            '..',
            'node_modules/@storybook/core/node_modules/core-js/modules'
        );
    return config;
  }

Adding code upside to main.js sovle my problem.

I had this fix in and it was working, but I upgraded all of my packages today and I ended up getting core-js errors again when trying to start storybook. I removed the above fix, and everything works again.

I didn't look into it much, but one thing I noticed was previously I had 6.0.21, which had this in the package.json:

  "_phantomChildren": {
    "p-limit": "2.3.0",
    "picomatch": "2.2.2"
  },

6.0.26 contains:

  "_phantomChildren": {
    "core-js": "3.6.5",
    "p-limit": "2.3.0",
    "picomatch": "2.2.2"
  },

I'm not sure how exactly things are resolving here without doing some reading, but something definitely happened with how core-js is resolved. Not sure if this is project specific, though.

[jefferscn]

 "webpackFinal": (config)=> {
    config.resolve.alias['core-js/modules'] =  path.resolve(
            __dirname,
            '..',
            'node_modules/@storybook/core/node_modules/core-js/modules'
        );
    return config;
  }

Adding code upside to main.js sovle my problem.

I had this fix in and it was working, but I upgraded all of my packages today and I ended up getting core-js errors again when trying to start storybook. I removed the above fix, and everything works again.

I didn't look into it much, but one thing I noticed was previously I had 6.0.21, which had this in the package.json:

  "_phantomChildren": {
    "p-limit": "2.3.0",
    "picomatch": "2.2.2"
  },

6.0.26 contains:

  "_phantomChildren": {
    "core-js": "3.6.5",
    "p-limit": "2.3.0",
    "picomatch": "2.2.2"
  },

I'm not sure how exactly things are resolving here without doing some reading, but something definitely happened with how core-js is resolved. Not sure if this is project specific, though.

Because your project now has the same version core-js with storybooks.

[timgivois]

I had to modify my .storybook/main.js file to:

    webpackFinal: async config => {
        return {
            ...config,
            resolve: {
                alias: {
                    'core-js/modules': '@storybook/core/node_modules/core-js/modules',
                    'core-js/features': '@storybook/core/node_modules/core-js/features',
                },
            },
        };

[dejanvasic85]

Here's my case. As soon as bringing in graphql-tools dependency for mocking GraphQL data (based on this neat approach from stripe), it brings up this error.

All I have to do is add this bit of code in any Story (or preview.js):

import {
  makeExecutableSchema,
  addMockFunctionsToSchema
} from 'graphql-tools';

const schemaString = `
  type Todo { id: ID, text: String, completed: Boolean }
  type User { id: ID, name: String }
  type Query { todoItems: [Todo] }
  # ... other types here
`;

// Make a GraphQL schema with no resolvers
const schema = makeExecutableSchema({ typeDefs: schemaString });

Bunch of errors appear starting with:

ERROR in ./node_modules/@graphql-tools/git-loader/index.esm.js
Module not found: Error: Can't resolve 'child_process' in 'xxx/node_modules/@graphql-tools/git-loader'

ERROR in ./node_modules/@graphql-tools/load-files/node_modules/@nodelib/fs.stat/out/adapters/fs.js
Module not found: Error: Can't resolve 'fs' in '/xxx/node_modules/@graphql-tools/load-files/node_modules/@nodelib/fs.stat/out/adapters'

ERROR in ./node_modules/@graphql-tools/load-files/node_modules/fast-glob/out/settings.js
Module not found: Error: Can't resolve 'fs' in '/xxx/node_modules/@graphql-tools/load-files/node_modules/fast-glob/out'

...

Running the command npm ls core-js. The only output that contains core-js < v3 is this:

└─┬ graphql-tools@7.0.1
  └─┬ @graphql-tools/relay-operation-optimizer@6.2.5
    └─┬ relay-compiler@10.0.1
      └─┬ fbjs@1.0.0
        └── core-js@2.6.11

Neither solutions worked for me. The resolution was not successful in package.json :(

"resolutions": {
    "styled-components": "^5",
    "**/core-js": "^3.6.5"
  }

[shilman]

@dejanvasic85 Did you try the --no-dll flag?

[epiqueras]

I did @shilman.

I also tried all the proposed solutions in this issue with Next.js, and none of them worked.

This is making v6 unusable.

[shilman]

@epiqueras do you have a repro repo you can share?

[epiqueras]

I am installing it in a new Next.js project.

[kevinmpowell]

@timgivois workaround worked for me: https://github.com/storybookjs/storybook/issues/11255#issuecomment-713083086

I'm using the Web Components flavor of Storybook.

[shilman]

Please try upgrading to 6.1

npx sb upgrade --prerelease

[epiqueras]

Still broken.

[barryofguilder]

It's still broken for me too and this is with a brand new Ember.js app that has nothing in it yet except for Storybook.

[epiqueras]

The issue arises when any dependency you have uses core-js@<3.

It seems that Storybook forces all dependencies to use the same version.

[jazithedev]

I'm having this issue also.

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

The interesting part is, that it occurs while having this in .babelrc:

["@babel/plugin-proposal-class-properties", { "loose": true }],
["@babel/plugin-proposal-private-methods", { "loose": true }]

When I'm removing { "loose": true } from the 2nd one,

["@babel/plugin-proposal-class-properties", { "loose": true }],
["@babel/plugin-proposal-private-methods"]

I got only a warning but I see only "Introduction" section at opened website.

Module build failed [...] 'loose' mode configuration must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled).

Using Storybook 6.1.0-beta.3.

Also, when removing { "loose": true }, I got

Error: Can't resolve 'core-js/modules/web.dom.iterable'

---

Update: I had old versions of @babel/preset-env and plugins @babel/plugin*. After upgrading/moving from 7.1. to 7.12., it started to work.

[43081j]

For people still bumping into this, we're blocked by babel/babel#12035

The problem is pretty well understood now and is on babel's end of things. Workarounds may be possible but would be fairly complex and hacky so im hoping babel can just fix it on their end instead, or at least tell us how to.

Looks like that is being fixed at babel/babel-polyfills#40

edit:

this is being worked on in #13055