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.

[ben-reitz]

I've run into this same issue when trying to migrate from v5.3 to v6.0.0-beta38 (although getting the same/similar issues with lower beta versions).

My webpack.config.js:

const path = require('path');

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.stories\.js?$/,
        loaders: [require.resolve('@storybook/source-loader')],
        enforce: 'pre',
    });

    config.module.rules = config.module.rules.map(rule => {
        if (
            String(rule.test) ===
            String(
                /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
            )
        ) {
            return {
                ...rule,
                test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/,
            };
        }

        return rule;
    });

    config.module.rules.push({
        test: /\.svg$/,
        use: [
            {
                loader: '@svgr/webpack',
                options: {
                    svgo: false,
                },
            },
        ],
    });

    return config;
};

When trying to run build-storybook -s public -o ./docs, I'm getting the following error in the output:

info => Compiling preview..
70% building 225/248 modules 23 active <LOCAL_PROJECT_PATH>/node_modules/@storybook/components/dist/Button/Button.jsERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve 'chromatic/isChromatic' in '<LOCAL_PROJECT_PATH>/node_modules/@storybook/ui/dist/components/layout'
(node:11596) UnhandledPromiseRejectionWarning: ModuleNotFoundError: Module not found: Error: Can't resolve 'chromatic/isChromatic' in '<LOCAL_PROJECT_PATH>/node_modules/@storybook/ui/dist/components/layout'
    at <LOCAL_PROJECT_PATH>/node_modules/webpack/lib/Compilation.js:925:10
    at <LOCAL_PROJECT_PATH>/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at <LOCAL_PROJECT_PATH>/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at <LOCAL_PROJECT_PATH>/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at <LOCAL_PROJECT_PATH>/node_modules/neo-async/async.js:2830:7
    at <LOCAL_PROJECT_PATH>/node_modules/neo-async/async.js:6877:13
    at <LOCAL_PROJECT_PATH>/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at <LOCAL_PROJECT_PATH>/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at <LOCAL_PROJECT_PATH>/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (<LOCAL_PROJECT_PATH>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at <LOCAL_PROJECT_PATH>/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at <LOCAL_PROJECT_PATH>/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (<LOCAL_PROJECT_PATH>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at <LOCAL_PROJECT_PATH>/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (<LOCAL_PROJECT_PATH>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at <LOCAL_PROJECT_PATH>/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
(node:11596) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:11596) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
70% building 932/932 modules 0 activenpm ERR! code ELIFECYCLE

*(actual project path was replaced by <LOCAL_PROJECT_PATH> by me)

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

@ndelangen Sorry, please ignore that last error - looks like that was similar to this: #11356. I had my main.js config set to

module.exports = {
    stories: ['../**/*.stories.@(js)'],
    addons: [
        '@storybook/addon-a11y',
        '@storybook/addon-docs',
        '@storybook/addon-links',
        '@storybook/addon-storysource',
        '@storybook/addon-toolbars',
        '@storybook/addon-viewport',
    ],
};

so the glob meant it may have been loading stories from my node_modules. 🤦

I've updated the glob to look solely at my src folder and now I'm getting the core-js issue mentioned by the OP...

info => Compiling preview..
70% building 26/29 modules 3 active <LOCAL_PROJECT_PATH>/node_modules/global/window.jsERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve 'core-js/modules/es.symbol' in '<LOCAL_PROJECT_PATH>/.storybook'
(node:3625) UnhandledPromiseRejectionWarning: ModuleNotFoundError: Module not found: Error: Can't resolve 'core-js/modules/es.symbol' in '<LOCAL_PROJECT_PATH>/.storybook'
    at <LOCAL_PROJECT_PATH>/node_modules/webpack/lib/Compilation.js:925:10
    at <LOCAL_PROJECT_PATH>/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at <LOCAL_PROJECT_PATH>/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at <LOCAL_PROJECT_PATH>/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at <LOCAL_PROJECT_PATH>/node_modules/neo-async/async.js:2830:7
    at <LOCAL_PROJECT_PATH>/node_modules/neo-async/async.js:6877:13
    at <LOCAL_PROJECT_PATH>/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at <LOCAL_PROJECT_PATH>/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at <LOCAL_PROJECT_PATH>/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (<LOCAL_PROJECT_PATH>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at <LOCAL_PROJECT_PATH>/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at <LOCAL_PROJECT_PATH>/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (<LOCAL_PROJECT_PATH>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at <LOCAL_PROJECT_PATH>/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (<LOCAL_PROJECT_PATH>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at <LOCAL_PROJECT_PATH>/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
(node:3625) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:3625) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
70% building 1953/1953 modules 0 activenpm ERR! code ELIFECYCLE

[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

└─┬ [email protected]
  ├── [email protected]  deduped
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └──  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:

└─┬ [email protected]
  └─┬ @graphql-tools/[email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected]

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.

[ktrzos]

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

[mayashavin]

I have a Vue component library that has zero dependencies needed for core-js, and it still throw me error
Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable'
After spending like >1 hour trying to install babel, core-js, and tried all the workaround, it still gave me error 🤦

I have the following:

"@babel/core": "^7.12.9",
    "@babel/plugin-proposal-optional-chaining": "^7.12.1",
    "@storybook/addon-actions": "^6.1.8",
    "@storybook/addon-essentials": "^6.1.8",
    "@storybook/addon-knobs": "^5.0.0",
    "@storybook/addon-links": "^6.1.8",
    "@storybook/addon-notes": "^5.0.0",
    "@storybook/vue": "^6.1.8",
    "@types/jest": "^26.0.15",
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-plugin-eslint": "^3.10.0",
    "@vue/cli-plugin-unit-jest": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.2.2",

[shilman]

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.0 containing PR #13055 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[kelly-tock]

Can this be updated when it's fully released?

[barryofguilder]

@shilman I just upgraded my Ember Addon with the pre-release version and it all works!

[mayashavin]

@shilman Still not working for me for very weird reason. Running yarn storybook throws a bunch of errors about core-js polyfill. For example:

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.symbol' in ...
 @ ./.storybook/preview.js-generated-config-entry.js 3:0-36
 @ multi ./node_modules/@storybook/vue/node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/vue/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

I have to do the workaround in main.js with the following:

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

This happens when I have core-js version specifically points to 2.6.9.

[madroneropaulo]

Still doesn't work. Just updated with the patch 6.2.0-alpha.1

[ben-reitz]

This release has finally fixed it for our component library's Storybook - thanks!

[shilman]

For those of you whose projects are NOT fixed by 6.2.0-alpha.1, some suggestions:

• Try removing node_modules and/or lockfiles and reinstalling?
• Try removing whatever workarounds you've added before

If that still doesn't fix it, perhaps you can post a link to your repo and we might be able to take a look and see what's going on. Thanks and thanks for your patience on this!

[hydrosquall]

Hey, thanks for the continued work on this. Unfortunately, upgrading to 6.2.0-alpha.1 on a private repo didn't fix the stories, we didn't have any workarounds to remove. I'll update here if I come up with a minimal repo that contains the issue.

The repository is a mix of JS/typescript, managed by yarn 2 (berry), and has core-js version 3.0.1 specified at the root level package.json. Most of the errors are of the form

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

Required package: core-js (via "core-js/modules/es.string.iterator")
// path to some internal code