Can't run Storybook with Webpack@5

Describe the bug

When trying to use Storybook in a project that uses webpack@5, and it’s not installed as a direct dependency, but rather as a transitive dependency, you get the following error:

Error: Cannot find module 'webpack/lib/util/makeSerializable.js'
Require stack:
- /Users/saharb/dev/storybook-test/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js
- /Users/saharb/dev/storybook-test/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js
- /Users/saharb/dev/storybook-test/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js
- /Users/saharb/dev/storybook-test/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docgen.js
- /Users/saharb/dev/storybook-test/node_modules/@storybook/core-common/dist/cjs/presets.js
- /Users/saharb/dev/storybook-test/node_modules/@storybook/core-common/dist/cjs/index.js
- /Users/saharb/dev/storybook-test/node_modules/@storybook/core-server/dist/cjs/index.js
- /Users/saharb/dev/storybook-test/node_modules/@storybook/core/dist/cjs/server.js
- /Users/saharb/dev/storybook-test/node_modules/@storybook/core/server.js
- /Users/saharb/dev/storybook-test/node_modules/@storybook/react/dist/cjs/server/index.js
- /Users/saharb/dev/storybook-test/node_modules/@storybook/react/bin/index.js

This is due to the fact that react-docgen-typescript-plugin does not install webpack, but relies on it as a peer dependency, and relies on it being version 4, while the webpack installed in the root is version 5:

webpack
├── 4.46.0 (@storybook/builder-webpack4, @storybook/builder-webpack5, @storybook/core-common, @storybook/core-server, @storybook/manager-webpack4, @storybook/manager-webpack5, @storybook/react)
├─┬ @storybook/builder-webpack5
│ └── 5.39.0
├─┬ @storybook/core-client
│ └── 5.39.0
├─┬ @storybook/manager-webpack5
│ └── 5.39.0
└─┬ my-webpack-config-package
  └── 5.39.0

To Reproduce Couldn’t create a repro using npx sb@next repro, and it’s kinda hard to create one manually.

System

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.16.1 - /var/folders/4v/ysqx3_nn4rs25ffn8zt8kz440000gp/T/fnm_multishell_85829_1623767722434/bin/node
    Yarn: 1.22.10 - /var/folders/4v/ysqx3_nn4rs25ffn8zt8kz440000gp/T/fnm_multishell_85829_1623767722434/bin/yarn
    npm: 6.14.12 - /var/folders/4v/ysqx3_nn4rs25ffn8zt8kz440000gp/T/fnm_multishell_85829_1623767722434/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.3.0-rc.4 => 6.3.0-rc.7
    @storybook/addon-essentials: ^6.3.0-rc.4 => 6.3.0-rc.7
    @storybook/addon-links: ^6.3.0-rc.4 => 6.3.0-rc.7
    @storybook/builder-webpack5: ^6.3.0-rc.4 => 6.3.0-rc.7
    @storybook/manager-webpack5: ^6.3.0-rc.4 => 6.3.0-rc.7
    @storybook/react: ^6.3.0-rc.4 => 6.3.0-rc.7

Additional context

😶

[kherock]

I was able to debug what’s going wrong here in Yarn with PnP - @storybook/react has a direct dependency for webpack 4 that causes all transitive dependencies below it to resolve to webpack 4 when they specify webpack 4/5 as peer dependencies. Here’s the relevant part of the dependency tree:

[root project]
├── @storybook/builder-webpack5@6.3.1 (devDep)
│   └── webpack@5 (dep)
├── @storybook/react@6.3.1 (devDep)
│   ├── @storybook/react-doc-gen-typescript (dep)
│   │   └── webpack >= 4 (peerDep)
│   └── webpack@4 (dep)
└── webpack@5 (devDep)

With PnP, requests are strictly resolved, so react-doc-gen-typescript always ends up receiving webpack@4 provided by @storybook/react. In NPM or Yarn 1.x, depending on your package-lock.json or yarn.lock, these dependencies could be flattened like this:

[root project]
├── @storybook/builder-webpack5@6.3.1
├── @storybook/react@6.3.1
│   └── webpack@4
├── @storybook/react-doc-gen-typescript
└── webpack@5 (provided by [root project],@storybook/builder-webpack5)

In this case, react-doc-gen-typescript is hoisted and it now retrieves the the project’s webpack version. If you don’t specify webpack@5 as a direct dependency in your project, @storybook/react and @storybook/builder-webpack5 are competing for the version of webpack that is hoisted, so node_modules could look like this:

[root project]
├── @storybook/builder-webpack5@6.3.1
│   └── webpack@5
├── @storybook/react@6.3.1
├── @storybook/react-doc-gen-typescript
└── webpack@4 (provided by @storybook/react)

Specifying webpack as a peerDep in @storybook/react for >= 4 would resolve this. Alternatively, @iamchanii’s suggestion can be refined slightly with

{ // ...
  "resolutions": {
    "@storybook/react@npm:6.3.2/webpack": "^5.41.1"
  }
}

[georgekrax]

Updated guide for migrating here.