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

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),
  };
}

[ShuPink]

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.

[shilman]

@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"
  }