故事书不会开始: TypeError：“编译”参数必须是编译的实例

Question

尝试在NX中启动Storybook，但在尝试以下命令时得到此错误：

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)

通过阅读其他类似的文章，我认为这可能是因为webpack的多个版本。

下面是相关的包/deps：yarn list --pattern "webpack"

├─ @angular-devkit/build-angular@14.2.9
│  └─ webpack@5.74.0
├─ @angular-devkit/build-webpack@0.1402.9
├─ @cypress/webpack-preprocessor@5.15.5
├─ @ngtools/webpack@14.2.9
├─ @nrwl/angular@15.0.13
│  └─ webpack-merge@5.7.3
├─ @nrwl/cypress@15.0.13
│  └─ fork-ts-checker-webpack-plugin@7.2.13
├─ @nrwl/webpack@15.0.13
│  ├─ copy-webpack-plugin@10.2.4
│  ├─ fork-ts-checker-webpack-plugin@7.2.13
│  └─ webpack-dev-server@4.11.1
├─ @storybook/builder-webpack4@6.5.13
│  ├─ terser-webpack-plugin@4.2.3
│  ├─ webpack-dev-middleware@3.7.3
│  ├─ webpack-sources@1.4.3
│  ├─ webpack-virtual-modules@0.2.2
│  └─ webpack@4.46.0
│     └─ terser-webpack-plugin@1.4.5
├─ @storybook/builder-webpack5@6.5.13
│  ├─ fork-ts-checker-webpack-plugin@6.5.2
│  ├─ html-webpack-plugin@5.5.0
│  └─ webpack-dev-middleware@4.3.0
├─ @storybook/core-common@6.5.13
│  ├─ fork-ts-checker-webpack-plugin@6.5.2
│  ├─ terser-webpack-plugin@1.4.5
│  ├─ webpack-sources@1.4.3
│  └─ webpack@4.46.0
├─ @storybook/core-server@6.5.13
│  ├─ terser-webpack-plugin@1.4.5
│  ├─ webpack-sources@1.4.3
│  └─ webpack@4.46.0
├─ @storybook/manager-webpack4@6.5.13
│  ├─ terser-webpack-plugin@4.2.3
│  ├─ webpack-dev-middleware@3.7.3
│  ├─ webpack-sources@1.4.3
│  ├─ webpack-virtual-modules@0.2.2
│  └─ webpack@4.46.0
│     └─ terser-webpack-plugin@1.4.5
├─ @storybook/manager-webpack5@6.5.13
│  ├─ html-webpack-plugin@5.5.0
│  └─ webpack-dev-middleware@4.3.0
├─ @types/webpack-env@1.18.0
├─ @types/webpack-sources@3.2.0
├─ @types/webpack@4.41.33
├─ case-sensitive-paths-webpack-plugin@2.4.0
├─ copy-webpack-plugin@11.0.0
├─ css-minimizer-webpack-plugin@3.4.1
├─ fork-ts-checker-webpack-plugin@4.1.6
├─ html-webpack-plugin@4.5.2
├─ license-webpack-plugin@4.0.2
├─ pnp-webpack-plugin@1.6.4
├─ terser-webpack-plugin@5.3.6
├─ tsconfig-paths-webpack-plugin@3.5.2
├─ webpack-bundle-analyzer@4.7.0
├─ webpack-dev-middleware@5.3.3
├─ webpack-dev-server@4.11.0
├─ webpack-filter-warnings-plugin@1.2.1
├─ webpack-hot-middleware@2.25.3
├─ webpack-log@2.0.0
├─ webpack-merge@5.8.0
├─ webpack-node-externals@3.0.0
├─ webpack-sources@3.2.3
├─ webpack-subresource-integrity@5.1.0
├─ webpack-virtual-modules@0.4.6
└─ webpack@5.75.0

我没有足够的经验来完全调试这个问题，所以你在这里看到webpack的问题了吗?或者有其他的想法是什么导致了这一切？

提前感谢您的帮助！

Answer 1

使用webpack版本5.64为我解决了这个问题！

Answer 2

尝试将webpack版本修正为v5.74.0文件中的package.json文件。对我起作用了！

...
"webpack": "5.74.0"

然后运行yarn强制安装所选版本。