Trying to start Storybook in a NX monorepo, but getting this error when trying these commands:
nx run projectName:storybook
nx storybook projectName
:
9% setup compilation SourceMapDevToolPlugin
C:\Users\userName\Documents\Git\bft3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:143
throw new TypeError(
^
TypeError: The 'compilation' argument must be an instance of Compilation
at Function.getCompilationHooks (C:\Users\userName\Documents\Git\bft3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:143:10)
at SourceMapDevToolModuleOptionsPlugin.apply (C:\Users\userName\Documents\Git\bft3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\SourceMapDevToolModuleOptionsPlugin.js:50:27)
at C:\Users\userName\Documents\Git\bft3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\SourceMapDevToolPlugin.js:163:53
at Hook.eval [as call] (eval at create (C:\Users\userName\Documents\Git\bft3\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:374:1)
at Hook.CALL_DELEGATE [as _call] (C:\Users\userName\Documents\Git\bft3\node_modules\webpack\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (C:\Users\userName\Documents\Git\bft3\node_modules\webpack\lib\Compiler.js:1122:26)
at C:\Users\userName\Documents\Git\bft3\node_modules\webpack\lib\Compiler.js:1166:29
at _next0 (eval at create (C:\Users\userName\Documents\Git\bft3\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:41:1)
at eval (eval at create (C:\Users\userName\Documents\Git\bft3\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:55:1)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
By reading other, similar posts i think it could be because of multiple versions of webpack.
Here are the related packages/deps:
yarn list --pattern "webpack"
├─ @angular-devkit/[email protected]
│ └─ [email protected]
├─ @angular-devkit/[email protected]
├─ @cypress/[email protected]
├─ @ngtools/[email protected]
├─ @nrwl/[email protected]
│ └─ [email protected]
├─ @nrwl/[email protected]
│ └─ [email protected]
├─ @nrwl/[email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ └─ [email protected]
├─ @storybook/[email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ └─ [email protected]
│ └─ [email protected]
├─ @storybook/[email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ └─ [email protected]
├─ @storybook/[email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ └─ [email protected]
├─ @storybook/[email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ └─ [email protected]
├─ @storybook/[email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ └─ [email protected]
│ └─ [email protected]
├─ @storybook/[email protected]
│ ├─ [email protected]
│ └─ [email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
I'm not quite experienced enough to debug this completely, so do you see an issue here with webpack or have any other idea what might be causing this?
Thanks in advance for any help!
CodePudding user response:
Try to fix the webpack
version to v5.74.0
in package.json
file. It worked for me!
...
"webpack": "5.74.0"
Then run yarn
to force install the selected version.
CodePudding user response:
using webpack version 5.64 fixed this issue for me!