Can't run Storybook with Webpack@5

sahariko commented 3 years ago

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

😶

shilman commented 3 years ago

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

sahariko commented 3 years ago

It works, but from the side of my-webpack-config-package, I don't necessarily have control over my consumers' package.json, and while requiring them to install it manually works, it's not ideal 😕

erkobridee commented 3 years ago

@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

a-ursino commented 3 years ago

can confirm that on a clean next.js project (with no custom code)

yarn create next-app --typescript && npx sb init --builder webpack5 I've experienced the same issue.

Adding webpack@v5 to devDep solved it.

{
  "name": "storybook",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "next": "11.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@storybook/addon-actions": "^6.3.0-rc.11",
    "@storybook/addon-essentials": "^6.3.0-rc.11",
    "@storybook/addon-links": "^6.3.0-rc.11",
    "@storybook/builder-webpack5": "^6.3.0-rc.11",
    "@storybook/manager-webpack5": "^6.3.0-rc.11",
    "@storybook/react": "^6.3.0-rc.11",
    "@types/react": "17.0.11",
    "babel-loader": "^8.2.2",
    "eslint": "7.29.0",
    "eslint-config-next": "11.0.0",
    "webpack": "5.39.1",
    "typescript": "4.3.4"
  }
}

maeriens commented 3 years ago

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.

iamchanii commented 3 years ago

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

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

kherock commented 3 years ago

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

rtrembecky commented 3 years ago

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

dotnetjunky commented 3 years ago

Why is @storybok/react still depending on webpack4?

merceyz commented 3 years ago

Without PnP, depending on your package-lock.json or yarn.lock, these dependencies could be flattened like this: In this case, react-doc-gen-typescript is hoisted and it now retrieves the the project's webpack version https://github.com/storybookjs/storybook/issues/15252#issuecomment-872255161

@kherock If it does then that's a bug, it should not get hoisted in that example and should be getting the webpack@4 version just like PnP

kherock commented 3 years ago

@merceyz Could you explain why? It seems like the criteria for hoisting is there. All of its peer dependencies are satisfied by ancestors beyond its parent.

merceyz commented 3 years ago

It's supposed to use what the parent provided, if the parent provides webpack@4 then that's what it should get regardless of what the grandparent provides

kherock commented 3 years ago

That makes sense, though I wasn't under the impression that package managers see that as a strict requirement. I'm sure that Yarn 2+ does the right thing here, but I'm not sure how else to explain why adding webpack5 as a direct dev dependency can fix the problem.

maeriens commented 3 years ago

A small sidenote, following what I commented before, after removing webpack@5 as devDepenency and localy applyig the fix on the associated PR, the npm ls webpack output is the one at the end of this comment. This was all done with node@14.17.0 and npm@6.14.13.

In my example, both Storybook and production build work correctly and use webpack@5, but the webpack@4 dependency is listed as extraneous under @storybook/react@6.3.6, and I don't believe I know enough about dependencies to say if this can be safely ignored or not.

ourLibrary
├─┬ @storybook/addon-essentials@6.3.6
│ └─┬ @storybook/addon-docs@6.3.6
│   └─┬ @storybook/builder-webpack4@6.3.6
│     └── UNMET PEER DEPENDENCY webpack@4.46.0 
├─┬ @storybook/builder-webpack5@6.3.6
│ ├─┬ @storybook/core-common@6.3.6
│ │ └── webpack@4.46.0 
│ └── webpack@5.49.0 
├─┬ @storybook/manager-webpack5@6.3.6
│ └── webpack@5.49.0  deduped
├─┬ @storybook/react@6.3.6
│ ├─┬ @storybook/core@6.3.6
│ │ └─┬ @storybook/core-server@6.3.6
│ │   ├─┬ @storybook/manager-webpack4@6.3.6
│ │   │ └── UNMET PEER DEPENDENCY webpack@4.46.0 
│ │   └── webpack@4.46.0 
│ └── webpack@4.46.0  extraneous     <---- here!
└─┬ ourCustomBuilder
  └── webpack@5.49.0  deduped

shilman commented 3 years ago

@dotnetjunky

Why is @storybok/react still depending on webpack4?

Storybook still uses webpack4 by default, with webpack5 as opt in. Changing this would be a breaking change, and we're not ready to do a breaking release. In 7.0, webpack5 will be the default and webpack4 will become opt-in.

EdmundMai commented 2 years ago

Seems like there are still issues, so I'm just reverting back to my current version

    "@storybook/addon-a11y": "6.3.8",
    "@storybook/addon-actions": "6.3.8",
    "@storybook/addon-essentials": "6.3.8",
    "@storybook/addon-knobs": "6.3.1",
    "@storybook/addon-links": "6.3.8",
    "@storybook/addon-viewport": "6.3.8",
    "@storybook/addons": "6.3.8",
    "@storybook/preset-create-react-app": "3.2.0",
    "@storybook/react": "6.3.8",
    "@storybook/storybook-deployer": "2.8.10",

shilman commented 2 years ago

@EdmundMai If you're using CRA you can't use webpack 5 until CRA supports it, which should be soon

RyanClementsHax commented 2 years ago

Is this a possible short term solution? https://github.com/arcanis/pnp-webpack-plugin

This is a webpack plugin recommended by the yarn folks for making webpack v4 work with pnp

sshquack commented 2 years ago

CRA 5 now comes with webpack 5 out of the box. After following the addon-postcss I'm seeing this error too. SB fails to build with CRA tailwind css and SB with this error:

99% done plugins webpack-hot-middlewarewebpack built preview 5f7ac74125465130ad66 in 4135ms
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) /Users/user/Desktop/code/js/react-ts-tw-sb-01/src/index.css Unknown word

> 1 | var api = require("!../node_modules/@storybook/addon-postcss/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");

Deps:

Storybook 6.4.9
@storybook/addon-postcss 2.0.0

Full repro: https://github.com/sshquack/react-ts-tw-sb-01

Any idea on how to get past this issue?

georgekrax commented 2 years ago

Updated guide for migrating here.

bpossolo commented 2 years ago

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

shilman commented 2 years ago

@bpossolo see my comment above about why SB still ships wepback4 by default in 6.x. did you try adding webpack@5 as a direct dependency in your project to force it to be hoisted? or resolutions/overrides if that doesn't do the trick?

7.0 is in early alpha and has gotten rid of webpack4 completely, but it's still pretty rough around the edges.

bpossolo commented 2 years ago

@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

shilman commented 1 year ago

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

this is still a problem in SB 7.x
you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).

storybookjs / storybook

Can't run Storybook with Webpack@5 #15252