vue.js - 错误类型错误 : The 'compilation' argument must be an instance of Compilation

标签 vue.js webpack compilation 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
这是我的 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"
  }
}
有没有人遇到过同样的问题?

最佳答案

我有 TypeError: The 'compilation' argument must be an instance of Compilation在 Windows 环境中没有更改项目并使用安装程序重新安装 nodejs 后,电子/ react 应用程序中的错误为我解决了。我相信安装其他一些软件修改了我的环境变量,可能与我的路径或构建工具有关。
我认为这可能是环境问题或您的 vue.config.js 有问题。对于将来查看此问题的任何人,这可能值得发布。
在我的研究中,另一个常见的解决方案是确保您没有全局安装多个 webpack 实例或作为依赖项。您可以使用 npm -g list 检查您的全局包裹.有一个 npm 命令 npm dedupe删除可能值得尝试的重复项。我已经阅读了 yarn 自动重复数据删除,因此您也可以尝试使用 yarn 而不是 npm 来运行您的项目。

关于vue.js - 错误类型错误 : The 'compilation' argument must be an instance of Compilation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68143244/

相关文章:

javascript - 带有html-webpack-plugin的webpack,全局安装时出错

javascript - 导入 Bootstrap JavaScript、Webpack

linux - 基于 ARM 的处理器上的编译器标志

compilation - 如何编译jdk本身

javascript - 当我通过 Vue Router 导航时,我丢失了元素的内容

javascript - 未捕获的 DOMException : Failed to execute 'readAsDataURL' on 'FileReader'

javascript - 测试值是否传递给发出事件的方法,Vue

javascript - Card 组件的按钮单击在 Vuetify 中不起作用

javascript - 如何让 Webpack 识别动态导出

visual-studio-2013 - 如何在 Visual Studio 中将 TypeScript 输出合并到多个文件中