Issue with 2 different versions of webpack libraries and incompatible TS type for Compiler

[szimek]

Summary

Hi!

After updating webpack in my project, I'm getting an error caused by incompatible types, "node_modules/webpack/types".Compiler does not match "node_modules/@storybook/preset-react-webpack/node_modules/webpack/types".Compiler. Looks like I've got webpack 5.92.0 specified for my app, but Storybook uses 5.91.0.

What's the recommended way to ensure that both Storybook and my app use the same version of webpack?

Additional information

.storybook/main.ts:53:26 - error TS2345: Argument of type 'ReactRefreshPlugin' is not assignable to parameter of type 'false | "" | 0 | ((this: Compiler, compiler: Compiler) => void) | WebpackPluginInstance | null | undefined'.
  Type 'ReactRefreshPlugin' is not assignable to type 'WebpackPluginInstance'.
    Types of property 'apply' are incompatible.
      Type '(compiler: import("/.../node_modules/webpack/types").Compiler) => void' is not assignable to type '(compiler: import("/.../node_modules/@storybook/preset-react-webpack/node_modules/webpack/types").Compiler) => void'.
        Types of parameters 'compiler' and 'compiler' are incompatible.
          Property 'platform' is missing in type 'import("/.../node_modules/@storybook/preset-react-webpack/node_modules/webpack/types").Compiler' but required in type 'import("/.../node_modules/webpack/types").Compiler'.

53     config.plugins!.push(new ReactRefreshWebpackPlugin())
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/webpack/types.d.ts:2303:2
    2303  platform: Readonly<PlatformTargetProperties>;
          ~~~~~~~~
    'platform' is declared here.


Found 1 error in .storybook/main.ts:53

Create a reproduction

No response

[szymonnowak-st]

For now I fixed it using yarn resolutions to pin webpack to a single version.

[valentinpalkovic]

If you're using yarn berry (v2 or higher) I would recommend to run yarn up webpack -R to update webpack recursively for all packages and transitive packages which rely on webpack. Then, in theory, syou should have the issue anymore.