question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

storybook@6 throws a core-js error

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:63
  • Comments:73 (25 by maintainers)

github_iconTop GitHub Comments

25reactions
43081jcommented, Aug 13, 2020

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?

21reactions
shilmancommented, Dec 1, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack 5 and Storybook 6 integration throws an error in ...
Basically the error is coming from the marked line in /node_modules/webpack/lib/DefinePlugin.js once running for the first time npm run ...
Read more >
Babel - Storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >
Webpack 5 and Storybook 6 integration throws an error in ...
npm i -D @storybook/builder-webpack5@next npm i -D dotenv-webpack. Then update your .storybook/main.js: module.exports = { core: { builder: "webpack5", } };.
Read more >
Visual Testing with Storybook | Gatsby
Then, update your .storybook/main.js to the following: ... Remove core-js to prevent issues with Storybook ... so Gatsby Link doesn't throw errors. global....
Read more >
fixture.detectchanges() throws error - You.com | The AI Search ...
storybookjs/storybookstorybook@6 throws a core-js error#11255. Created over 2 years ago. 73. With storybook 6, my very basic typescript setup throws errors ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found