Storybook build fails with "Cannot find module 'webpack/lib/util/makeSerializable.js" after upgrading storybook packages to 6.3.0

Describe the bug start-storybook and build-storybook fail with Error: Cannot find module 'webpack/lib/util/makeSerializable.js'

To Reproduce See this commit: https://github.com/ismay/superwolff/commit/2ef03b79734af55c87d8b58f84422c1e1894a2c2. Chromatic tests here are unchanged, so on CI the build isn’t failing. However a local npm install (even after clearing node_modules) of this commit, and running npm run storybook:start yields the following output:

> storybook:start
> start-storybook -p 6006 --quiet

info @storybook/react v6.3.0
info 
info => Loading presets
info => Loading 1 config file in "/Users/ismay/Projects/github/ismay/superwolff/.storybook"
info => Loading 9 other files in "/Users/ismay/Projects/github/ismay/superwolff/.storybook"
info => Adding stories defined in "/Users/ismay/Projects/github/ismay/superwolff/.storybook/main.js"
info => Using prebuilt manager
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
node:internal/modules/cjs/loader:927
  throw err;
  ^

Error: Cannot find module 'webpack/lib/util/makeSerializable.js'
Require stack:
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docgen.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-common/dist/cjs/presets.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-common/dist/cjs/index.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-server/dist/cjs/index.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core/dist/cjs/server.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core/server.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/dist/cjs/server/index.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/bin/index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js:6:55)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js:108:42
    at _next0 (eval at create (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:203:1)
    at Hook.eval [as call] (eval at create (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:286:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1017:26) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docgen.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-common/dist/cjs/presets.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-common/dist/cjs/index.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-server/dist/cjs/index.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core/dist/cjs/server.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core/server.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/dist/cjs/server/index.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/bin/index.js'
  ]
}

System

Environment Info:

  System:
    OS: macOS 11.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Binaries:
    Node: 15.14.0 - /var/folders/61/0bv_jh4j7jv0znfdbw6p5c180000gn/T/fnm_multishells/21506_1624468041471/bin/node
    npm: 7.9.0 - /var/folders/61/0bv_jh4j7jv0znfdbw6p5c180000gn/T/fnm_multishells/21506_1624468041471/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 89.0.1
    Safari: 14.1
  npmPackages:
    @storybook/addon-actions: ^6.3.0 => 6.3.0 
    @storybook/addon-essentials: ^6.3.0 => 6.3.0 
    @storybook/addon-links: ^6.3.0 => 6.3.0 
    @storybook/builder-webpack5: ^6.3.0 => 6.3.0 
    @storybook/manager-webpack5: ^6.3.0 => 6.3.0 
    @storybook/react: ^6.3.0 => 6.3.0 

[josh-stevens]

I was only able to fix this by adding this:

typescript: { reactDocgen: false },

It seems that storybook was still trying to reference webpack 4 until I switched this toggle off.

[lauralouiset]

I was only able to fix this by adding this:

typescript: { reactDocgen: false },

It seems that storybook was still trying to reference webpack 4 until I switched this toggle off.

THIS WORKED FOR ME! 🎉

in case anyone else wants to try this: add typescript: { reactDocgen: false }, into module.exports inside .storybook/main.js