Fresh setup for Storybook gives "Cannot find module 'webpack/lib/util/makeSerializable.js'" error

[mauris]

Current Behavior

Getting the error after running npx nx run <libName>:build-storybook following a fresh test setup on NX v15.5.2:

 >  NX   Cannot find module 'webpack/lib/util/makeSerializable.js'

   Require stack:
   - /Users/mauris/test/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js
   - /Users/mauris/test/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js
   - /Users/mauris/test/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js
   - /Users/mauris/test/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docs.js
   - /Users/mauris/test/node_modules/@storybook/core-common/dist/cjs/presets.js
   - /Users/mauris/test/node_modules/@storybook/core-common/dist/cjs/index.js
   - /Users/mauris/test/node_modules/@storybook/core-server/dist/cjs/index.js
   - /Users/mauris/test/node_modules/@nrwl/storybook/src/executors/build-storybook/build-storybook.impl.js
   - /Users/mauris/test/node_modules/nx/src/config/workspaces.js
   - /Users/mauris/test/node_modules/nx/src/command-line/run.js
   - /Users/mauris/test/node_modules/nx/bin/run-executor.js
   Pass --verbose to see the stacktrace.

Steps:

1. Created new workspace named test using npx create-nx-workspace --preset=react
2. Installed @nrwl/storybook using npm install -D @nrwl/storybook
3. Generated React library named mode using npx nx g @nrwl/react:library
4. Initialized mode with npx nx g @nrwl/storybook:configuration mode
5. Ran the Storybook build target with npx nx run mode:build-storybook
6. Got the error above.

If I ran npm ls webpack, I get the following

├─┬ @storybook/[email protected]
│ └── UNMET PEER DEPENDENCY [email protected] 

Expected Behavior

I should be able to run build-storybook target successfully.

Github Repo

No response

Steps to Reproduce

Steps:

1. Created new workspace named test using npx create-nx-workspace --preset=react
2. Installed @nrwl/storybook using npm install -D @nrwl/storybook
3. Generated React library named mode using npx nx g @nrwl/react:library
4. Initialized mode with npx nx g @nrwl/storybook:configuration mode
5. Ran the Storybook build target with npx nx run mode:build-storybook
6. Got the error above.

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 14.21.2
   OS   : darwin arm64
   npm  : 6.14.17
   
   nx : 15.5.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.5.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.5.2
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.5.2
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.5.2
   @nrwl/js : 15.5.2
   @nrwl/linter : 15.5.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.5.2
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.5.2
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.5.2
   @nrwl/web : 15.5.2
   @nrwl/webpack : Not Found
   @nrwl/workspace : 15.5.2
   @nrwl/vite : Not Found
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

Failure Logs

No response

Additional Information

No response

[mauris]

Currently, in order for me to move on from here, I have to explicitly install webpack@^5.75.0 by running npm i -D webpack@^5.75.0.

[jaysoo]

It's the same issue as #14455

WIll be fixed in the next patch release once the PR lands (#14480).

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.