Storybook: corejs-upgrade-webpack-plugin causing problems

[jdelStrother]

Describe the bug
If you import fetch-mock (which relies on core-js v2), its core-js imports fail. If I hack storybook to remove the corejs-upgrade-webpack-plugin, everything seems to work fine.

Sample errors:

ERROR in ./node_modules/fetch-mock/es5/client.js
Module not found: Error: Cannot find module 'core-js/modules/es6.regexp.replace'
 @ ./node_modules/fetch-mock/es5/client.js 115:0-45
 @ ./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

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/jdelStrother/corejs-demo (a create-react-app with storybook, and an import for fetch-mock)
2. Run yarn storybook

Expected behavior
Storybook successfully builds

System:

• OS: MacOS 10.14.5
• Device: Macbook Pro 2016
• Version: 5.1.9

Additional context
Fun fact: Naming your project "core-js-demo" is also a great way to break your storybook build since it matches the /core-js/ regexp that the plugin uses...

[ndelangen]

Strange, i think it might be because they use babel-polyfill, which libraries really shouldn't.

I'm hoping we can fix this on their end.

Thanks for the repro, I'll take a look if nothing comes out of the fetch-mock.

Looking at the error, that module has been completely removed from core-js (my guess is all platforms now support that api and no polyfill is required anymore).

Really confirms to me, fetch-mock should be upgraded.

[nutboltu]

I am using "fetch-mock": "^7.3.9" and "@storybook/react": "^5.1.9", and still getting same error. I found NormalModuleReplacementPlugin is causing the issue.
So I filtered the plugin from .storybook/webpack.config.js and it's working fine.

module.exports = ({ config }) => {
  config.plugins = config.plugins.filter(
      p => String(p.resourceRegExp) !== '/core-js/'
    );

  return config;
};

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

[jdelStrother]

I'm still seeing this with storybook 5.1.11, core-js 3.2.1, and fetch-mock 7.3.9.

[nutboltu]

@jdelStrother is that workaround I mentioned didn't work for you?

[jdelStrother]

It does, but seems like this ought to be fixed rather than hacked around.

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

[Hypnosphi]

This happens with any module that depends on core-js@2

[Hypnosphi]

Fun fact: this issue is the second link in Google for "corejs-upgrade-webpack-plugin"

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

[nemoDreamer]

Fun fact: Naming your project "core-js-demo" is also a great way to break your storybook build since it matches the /core-js/ regexp that the plugin uses...

_OMG..._
This error was _only_ happening on CI, and has been taking up most of my time these past 2 days...

My branch was called issue/SG-16714-fix-core-js-dist-conflicts, which on CI gets baked into the workspace path...:

ERR! EntryModuleNotFoundError: Entry module not found: Error: Cannot find module '/mnt/data/jenkins/workspace/ix-core-js-dist-conflicts/node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!/mnt/data/jenkins/workspace/ix-core-js-dist-conflicts/node_modules/@storybook/core/dist/server/templates/index.ejs'

🤦‍♂

[ndelangen]

oof :(

[BridgeAR]

@ndelangen we just ran into this issue as well. The problem ist that corejs-upgrade-webpack-plugin fundamentally breaks the way modules work. It is mostly not possible to replace one version with another, since there are often valid reasons to require a specific version.

In this specific case corejs version 2 files are required that do not exist in version 3. This will always fail therefore. But even if the file itself would exist, it's unclear if the exported functionality would still work the same. I therefore highly recommend to deprecate the corejs-upgrade-webpack-plugin and to remove it from storybook as dependency.

I am happy to open a pull request myself, if that could resolve the issue faster.

[ndelangen]

@BridgeAR We can remove it in 6.0, I'd be happy to accept a PR on the next branch!

[probablyup]

@ndelangen why wouldn't you take this for v5 as well?

[shilman]

@probablyup v6 is coming up in the next 1-2 mo. we don't have the bandwidth to make potentially destabilizing changes to existing versions and iterate the product at the same time.

our process:

• add features & bugfixes to next (which will be released in the next minor/major), daily alphas
• patch "safe" or critical bugfixes back to master along the way, release as needed
• do heavy community QA ahead of minor/major releases
• release & stabilize with slightly looser criteria for what is "safe"
• wash, rinse, repeat

we typically don't accept PRs directly to master--nearly everything gets patched back from next unless it's a bugfix for something that only exists on master