Webpack.IgnorePlugin() Error with Webpack 5 and React < 18 #18571

emad-ms · 2022-06-25T19:47:18Z

Describe the bug
Tried updating the webpack from 4 to 5 but still have to use React 16.14.0. Added both @storybook/builder-webpack5 and @storybook/manager-webpack5 but getting an error from webpack because of how framework-preset-react-dom-hack.js is using webpack.IgnorePlugin().
Error:

Error: NormalModuleFactory.beforeResolve (IgnorePlugin) is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.

To Reproduce
Set the package as below:

{
    "devDependencies": {
        "@storybook/addon-a11y": "^6.5.9",
        "@storybook/addon-actions": "^6.5.9",
        "@storybook/addon-essentials": "^6.5.9",
        "@storybook/addon-interactions": "^6.5.9",
        "@storybook/addon-links": "^6.5.9",
        "@storybook/builder-webpack5": "^6.5.9",
        "@storybook/manager-webpack5": "^6.5.9",
        "@storybook/react": "^6.5.9",
        "@storybook/testing-library": "^0.0.13",
        ...
        ...
        "webpack": "^5.73.0",
     },
    "dependencies": {
       ...
       "react": "^16.14.0",
       "react-dom": "^16.14.0",
       ...
    }
}

and here is the main.js file:

module.exports = {
  core: {
    builder: "webpack5"
  },
  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-a11y"
  ],
  framework: "@storybook/react"
};

System
System:
OS: macOS 12.4
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Browsers:
Chrome: 97.0.4692.99
Firefox: 101.0
Safari: 15.5
npmPackages:
@storybook/addon-a11y: ^6.5.9 => 6.5.9
@storybook/addon-actions: ^6.5.9 => 6.5.9
@storybook/addon-essentials: ^6.5.9 => 6.5.9
@storybook/addon-interactions: ^6.5.9 => 6.5.9
@storybook/addon-links: ^6.5.9 => 6.5.9
@storybook/builder-webpack5: ^6.5.9 => 6.5.9
@storybook/manager-webpack5: ^6.5.9 => 6.5.9
@storybook/react: ^6.5.9 => 6.5.9
@storybook/testing-library: ^0.0.13 => 0.0.13

Additional context
Looks like the error comes from framework-preset-react-dom-hack.js:

export async function webpackFinal(config: Configuration) {
  const reactDomPkg = await readJSON(require.resolve('react-dom/package.json'));

  return {
    ...config,
    plugins: [
      ...config.plugins,
      reactDomPkg.version.startsWith('18') || reactDomPkg.version.startsWith('0.0.0')
        ? null
        : new IgnorePlugin({
            resourceRegExp: /react-dom\/client$/,
            contextRegExp: /(app\/react|app\\react|@storybook\/react|@storybook\\react)/, // TODO this needs to work for both in our MONOREPO and in the user's NODE_MODULES
          }),
    ].filter(Boolean),
  };
}

The text was updated successfully, but these errors were encountered:

Mesgin · 2022-07-04T23:26:57Z

I'm having the same issue

thibaudcolas · 2022-07-08T00:11:59Z

I’m similarly using React 16 with Storybook v6.5 and Webpack 5, and didn’t run into this. I tried to reproduce the above setup , I think the dependencies & config are identical (package.json, main.js). build-storybook doesn’t report any errors.

This error message looks a bit like what would happen if using a Webpack 4 plugin with Webpack 5, or vice-versa – perhaps your project still has Webpack 4 getting loaded somehwere?

radualex · 2022-07-08T07:34:59Z

It works fine with React 16, but I get this error after updating to React 17.

ShuPink · 2022-07-10T09:39:15Z

I'm using React 17 with webpack 5 but encountered this error when trying to upgrade storybook from 6.4.9 to 6.5.9.
I've downgraded back to 6.4.9 in the meantime.

radualex · 2022-07-11T20:29:06Z

@ShuPink This solution seems to be working as a temporary fix.

emad-ms · 2022-07-15T00:16:24Z

My problem temporarily has been solved by using --legacy-peer-deps on the npm installation with the latest version
Or add legacy-peer-deps=true in your .npmrc file

shilman · 2022-08-19T13:28:11Z

Does anybody have a reproduction repo they can share? See how to create a repro. Thank you! 🙏

ShuPink · 2022-08-20T01:58:45Z

Upgrading to 6.5.10 has now resolved this issue for me ^^;

Storybook 6.5.10
React 17.0.2
Webpack 5
Node 16.13.0

emad-ms · 2022-08-21T19:13:45Z

I still have the same issue with Storybook 6.5.10. I haven't found a chance to create a repo yet. I will do this next week

markolech · 2022-08-22T19:41:08Z

We are also having this issue.

Storybook 6.5.10
React 17.0.2
Webpack 5.71.0
Node 16.13.2

hrldcpr · 2022-08-23T04:40:43Z

@shilman here's a repo with a (excessively?) minimal reproduction https://github.com/hrldcpr/storybook-waterfall-bailing-error

Run npm install && npx start-storybook and you should get the error.

I think the particular locked package versions definitely have something to do with things, but this is pulled from a large somewhat-messy proprietary codebase so this is the best I could do

shilman · 2022-08-23T04:43:39Z

@hrldcpr Thanks so much! I'll see what we can figure out!

Cc @storybookjs/core

shilman · 2022-08-23T06:54:11Z

@hrldcpr repro demonstrates the problem (in both npm8 and npm6), thanks so much

Haven't figured out the issue yet, but have some workarounds:

If I install with yarn instead of npm it works
If I'm using npm8 and add overrides to package.json it works:

  "overrides": {
    "webpack": "^5.52.0"
  }

hrldcpr · 2022-08-23T13:38:20Z

Ah yeah good point, I think yarn fixes it because it ignores package-lock.json

Similarly, rm package-lock.json && npm install --legacy-peer-deps also fixes it.

Unfortunately, neither of these are easy options for the larger project where we're experiencing the error, so if anyone can find a less invasive fix/workaround, that would be awesome.

Edit: oh somehow missed the npm overrides workaround, I'll see if that can work for the larger project, thanks!

hrldcpr · 2022-08-23T15:47:11Z

That overrides trick is very helpful, thanks!

And it leads me to think that the issue is that both webpack 4 and 5 are in the project, for some reason… the relevant lines in package-lock.json seem to be:

{
...
  "packages": {
...
    "node_modules/@storybook/builder-webpack5/node_modules/@storybook/core-common/node_modules/webpack": {
      "version": "4.46.0",
      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
...
    "node_modules/@storybook/manager-webpack5/node_modules/@storybook/core-common/node_modules/webpack": {
      "version": "4.46.0",
      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
...
    "node_modules/@storybook/react/node_modules/webpack": {
      "version": "4.46.0",
      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
...
    "node_modules/@storybook/telemetry/node_modules/webpack": {
      "version": "4.46.0",
      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
...

I know very little about package-lock.json so I don't know how those got in there, but if there's some clever npm command to update them to webpack 5 then it could maybe be a cleaner fix than needing to add the overrides field in package.json

nperez0111 · 2022-09-16T11:06:56Z

At least with core-common it explicitly defines that it uses webpack 4:
https://github.com/storybookjs/storybook/blob/v6.5.12/lib/core-common/package.json#L92

I feel like this should be changed to "^4.0.0 || ^5.0.0" to allow either version. But I think that the default would be to install webpack 5 which would break the build of people not using the webpack 5 builder.

So the overrides option may be the best bet if you can use npm v8. Unfortunately my team is stuck on npm v7 & I attempted modifying the package-lock by hand to get rid of webpack 4 references but that proved to be more difficult than I hoped so I'm just going to hold back on upgrading to 6.5. Hopefully v7 will switch to webpack 5 by default

rexkenley · 2023-03-20T15:42:03Z

I am getting the same issue with the latest build as well

pacakge.json:
"dependencies": {
...
"core-js": "^3.26.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"regenerator-runtime": "^0.13.11",
"tslib": "^2.4.1"
},
"devDependencies": {
...
"@nrwl/cli": "15.8.6",
"@nrwl/cypress": "15.8.6",
"@nrwl/eslint-plugin-nx": "15.8.6",
"@nrwl/jest": "15.8.6",
"@nrwl/js": "15.8.6",
"@nrwl/linter": "15.8.6",
"@nrwl/next": "15.8.6",
"@nrwl/node": "15.8.6",
"@nrwl/react": "15.8.6",
"@nrwl/rollup": "15.8.6",
"@nrwl/storybook": "15.8.6",
"@nrwl/web": "15.8.6",
"@nrwl/webpack": "15.8.6",
"@nrwl/workspace": "15.8.6",
...
"@storybook/addon-essentials": "6.5.15",
"@storybook/addon-interactions": "^6.5.14",
"@storybook/addon-jest": "^6.5.14",
"@storybook/addon-links": "^6.5.14",
"@storybook/addons": "^6.5.14",
"@storybook/builder-webpack5": "6.5.15",
"@storybook/core-common": "^6.5.15",
"@storybook/core-server": "6.5.15",
"@storybook/jest": "^0.0.10",
"@storybook/manager-webpack5": "6.5.15",
"@storybook/react": "6.5.15",
"@storybook/testing-library": "^0.0.13",
"@storybook/testing-react": "^1.3.0",
"@storybook/theming": "^6.5.14",
...
"nx": "15.8.6",
"typescript": "4.9.3",
...
"webpack": "^5.75.0",
"webpack-merge": "^5.8.0"
}

hrldcpr · 2023-03-20T15:50:52Z

@rexkenley just in case you didn't see it above, if you're looking for a workaround before this gets fixed, try adding this to your package.json:

  "overrides": {
    "webpack": "^5.52.0"
  }

rexkenley · 2023-03-20T16:03:01Z

@hrldcpr

That didn't work. Do I have to run npm i and regenerate the package-lock after making that change?

I ran npm ls webpack and noticed these errors too

hrldcpr · 2023-03-20T17:12:04Z

@rexkenley not sure, sorry. the overrides hack worked for me back when I had this problem. good luck!

rexkenley · 2023-03-20T17:15:47Z

@hrldcpr

You are right. The issue was I copied the version verbatim, I should have replaced the version with the one that I am using.

The workaround WORKS. Thanks for your help!

emad-ms added bug needs triage labels Jun 25, 2022

shilman added builder-webpack5 has workaround needs reproduction and removed needs triage labels Aug 19, 2022

shilman added linear and removed needs reproduction labels Aug 23, 2022

ndelangen removed the linear-ghaction label Feb 21, 2023

KyleDanny mentioned this issue Mar 28, 2023

webpack overide with same version statisticsnorway/ssb-component-library#677

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack.IgnorePlugin() Error with Webpack 5 and React < 18 #18571

Webpack.IgnorePlugin() Error with Webpack 5 and React < 18 #18571

emad-ms commented Jun 25, 2022 •

edited

Loading

Mesgin commented Jul 4, 2022

thibaudcolas commented Jul 8, 2022

radualex commented Jul 8, 2022

ShuPink commented Jul 10, 2022

radualex commented Jul 11, 2022

emad-ms commented Jul 15, 2022 •

edited

Loading

shilman commented Aug 19, 2022

ShuPink commented Aug 20, 2022

emad-ms commented Aug 21, 2022

markolech commented Aug 22, 2022

hrldcpr commented Aug 23, 2022

shilman commented Aug 23, 2022

shilman commented Aug 23, 2022 •

edited

Loading

hrldcpr commented Aug 23, 2022 •

edited

Loading

hrldcpr commented Aug 23, 2022 •

edited

Loading

nperez0111 commented Sep 16, 2022

rexkenley commented Mar 20, 2023

hrldcpr commented Mar 20, 2023

rexkenley commented Mar 20, 2023 •

edited

Loading

hrldcpr commented Mar 20, 2023

rexkenley commented Mar 20, 2023 •

edited

Loading

Webpack.IgnorePlugin() Error with Webpack 5 and React < 18 #18571

Webpack.IgnorePlugin() Error with Webpack 5 and React < 18 #18571

Comments

emad-ms commented Jun 25, 2022 • edited Loading

Mesgin commented Jul 4, 2022

thibaudcolas commented Jul 8, 2022

radualex commented Jul 8, 2022

ShuPink commented Jul 10, 2022

radualex commented Jul 11, 2022

emad-ms commented Jul 15, 2022 • edited Loading

shilman commented Aug 19, 2022

ShuPink commented Aug 20, 2022

emad-ms commented Aug 21, 2022

markolech commented Aug 22, 2022

hrldcpr commented Aug 23, 2022

shilman commented Aug 23, 2022

shilman commented Aug 23, 2022 • edited Loading

hrldcpr commented Aug 23, 2022 • edited Loading

hrldcpr commented Aug 23, 2022 • edited Loading

nperez0111 commented Sep 16, 2022

rexkenley commented Mar 20, 2023

hrldcpr commented Mar 20, 2023

rexkenley commented Mar 20, 2023 • edited Loading

hrldcpr commented Mar 20, 2023

rexkenley commented Mar 20, 2023 • edited Loading

emad-ms commented Jun 25, 2022 •

edited

Loading

emad-ms commented Jul 15, 2022 •

edited

Loading

shilman commented Aug 23, 2022 •

edited

Loading

hrldcpr commented Aug 23, 2022 •

edited

Loading

hrldcpr commented Aug 23, 2022 •

edited

Loading

rexkenley commented Mar 20, 2023 •

edited

Loading

rexkenley commented Mar 20, 2023 •

edited

Loading