storybook: Can't run Storybook with Webpack@5

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

Updated guide for migrating here.

the resolution for webpack for @storybook/react wasn’t enough for me, as webpack: 4 was defined for several packages. in my case, this helped:

  "resolutions": {
    "@storybook/react/webpack": "^5",
    "@storybook/core-common/webpack": "^5",
    "@storybook/core-server/webpack": "^5",
    "@storybook/builder-webpack4/webpack": "^5",
    "@storybook/manager-webpack4/webpack": "^5"
  }

In my case, I set resolutions field of package.json (fyi: Yarn Berry)

{
  // ...
  "resolutions": {
    "webpack": "5"
  }
}

what happens if you install webpack5 as a direct dev dependency?

Why is @storybok/react still depending on webpack4?

@shilman thanks for the quick reply. I have webpack 5 latest, @storybook/builder-webpack5 and @storybook/manager-webpack4 in package.json but for some reason it’s still resolving to use the libs for webpack4.

we are pulling in quite a few storybook packages so ive removed them all earlier today (hoping there’s something that is no longer necessary). tomorrow i’m going to try reinitializing the project using npx sb init --builder webpack5 if that still doesn’t work I’ll try the resolver overrides because that seems like the least desirable option

i’m trying to upgrade an angular project (that uses storybook) to webpack 5 but storybook keeps pulling in webpack 4 libs and typescript types which cause the build to fail.

looks like @storybook/core-server has:

• a direct dependency on @storybook/builder-webpack4
• a direct dependency on @storybook/manager-webpack4

I have a very similar experience. Something seems to be overriding webpack@5 in favour of webpack@4 and installing that.

We have a UI library which uses storybook and another custom package to build itself. Our custom package has as dependency webpack@5, but storybook has a mix of webpack@4 and webpack@5 once you use the @storybook/manager-webpack5 and @storybook/builder-webpack5. Removing node modules and the package-lock, and doing a npm ls shows something similar to the following:

Somethingwithstorybook
├─┬ @storybook/addon-essentials@6.3.1
│ └─┬ @storybook/addon-docs@6.3.1
│   └─┬ @storybook/builder-webpack4@6.3.1
│     └── webpack@4.46.0  deduped
├─┬ @storybook/builder-webpack5@6.3.1
│ ├─┬ @storybook/core-common@6.3.1
│ │ └── webpack@4.46.0  deduped
│ └── UNMET PEER DEPENDENCY webpack@5.41.1 
├─┬ @storybook/manager-webpack5@6.3.1
│ └── UNMET PEER DEPENDENCY webpack@5.41.1 
├─┬ @storybook/react@6.3.1
│ ├─┬ @storybook/core@6.3.1
│ │ └─┬ @storybook/core-server@6.3.1
│ │   ├─┬ @storybook/manager-webpack4@6.3.1
│ │   │ └── webpack@4.46.0  deduped
│ │   └── webpack@4.46.0  deduped
│ └── webpack@4.46.0 
└─┬ ourCustomBuilder
  └── UNMET PEER DEPENDENCY webpack@5.41.1 

And going to the base node_modules/webpack shows that it has webpack@4.46 installed. Installing locally webpack@5 works but it is not an intended solution, because that is why we have a custom builder that shares the webpack configs.

@shilman installing the webpack v5 as dev dep fixed the issue for me

ps.: I’m using the @storybook v6.3.0-rc.11, project with next.js v11, tailwind css v2.2, sass and typescript