错误 TypeError:“compilation”参数必须是 Compilation 的实例

And*_*son 6 compilation webpack vue.js vue-cli

如果我跑了npm run serve,那么接下来会发生什么。

 INFO  Starting development server...
 ERROR  TypeError: The 'compilation' argument must be an instance of Compilation
TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/home/anderson/@python/zeta-value/front/node_modules/webpack/lib/NormalModule.js:193:10)
    at /home/anderson/@python/zeta-value/front/node_modules/vue-loader/lib/plugin-webpack5.js:39:47
    at SyncHook.eval [as call] (eval at create (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:1)
    at SyncHook.lazyCompileHook (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:631:26)
    at /home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:662:28)
    at /home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at AsyncSeriesHook.lazyCompileHook (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:41:32)
    at /home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:33:9
    at Compiler.readRecords (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:529:11)
    at new Watching (/home/anderson/@python/zeta-value/front/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:30:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! front@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the front@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/anderson/.npm/_logs/2021-06-26T14_20_10_454Z-debug.log
Run Code Online (Sandbox Code Playgroud)

这是我的 package.json。

{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "apexcharts": "^3.27.1",
    "axios": "^0.21.1",
    "chart.js": "^3.3.2",
    "core-js": "^3.15.1",
    "vue": "^2.6.14",
    "vue-apexcharts": "^1.6.1",
    "vue-router": "^3.5.2",
    "vue-template-compiler": "^2.6.14",
    "vuetify": "^2.5.5"
  },
  "devDependencies": {
    "@mdi/font": "^5.9.55",
    "@mdi/js": "^5.9.55",
    "@vue/cli": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "vue-cli-plugin-vuetify": "^2.4.1"
  }
}
Run Code Online (Sandbox Code Playgroud)

有没有人遇到过同样的问题?

小智 10

TypeError: The 'compilation' argument must be an instance of Compilation在 Windows 环境中未对项目进行任何更改后,我在 Electron/React 应用程序中遇到错误,并使用安装程序重新安装 NodeJS 为我解决了这个问题。我相信安装其他一些软件会修改我的环境变量,可能与我的路径或构建工具有关。

我认为这可能是环境问题或您的问题vue.config.js,这可能值得将来关注此问题的任何人发布。

在我的研究中,另一个常见的解决方案是确保您没有全局安装或作为依赖项安装多个 webpack 实例。您可以使用 检查您的全局包npm -g list。有一个 npm 命令npm dedupe可以删除重复项,这可能值得尝试。我已经读到过,yarn 会自动进行重复数据删除,因此您也可以尝试使用yarn 而不是 npm 来运行您的项目。

  • 我刚刚使用 Vue 和 vue-cli@next (5.0.0-beta.6) 启动一个新项目,但遇到了这个错误。运行“npm dedupe”为我解决了这个问题。感谢你的分享! (6认同)