Repository: storybook
Issue: Webpack.IgnorePlugin() Error with Webpack 5 and React < 18
Labels: bug,has workaround,builder-webpack5

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