CODEWITHSUNDEEP
vue.jswebpackcompilationvue-cli
Anderson
Anderson

Reputation: 3247

ERROR TypeError: The 'compilation' argument must be an instance of Compilation

If I run npm run serve then this is what happened next.

 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! [email protected] serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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

Here is my 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"
  }
}

Is there anyone who experienced the same problem?

Upvotes: 6

Views: 10867

Answers (2)

Titouan Thd
Titouan Thd

Reputation: 323

I also encountered this error with webpack. I solved the problem by adding capital letters into the path to the directory in which the command is executed.

Let's take the following case:

I develop an application in the directory :

C:\Users\username\Desktop\myApp

I compile the assets of this application with webpack. The Compilation type error is triggered if I execute the npm run dev command in c:\users\username\desktop\myapp because webpack can't find the node_modules folder. To fix the error you just have to run your command into the right directory with also capital letters.

C:\Users\username\Desktop\myApp> npm run dev

Webpack should find the node_modules folder and you won't have any more errors.

Upvotes: 4

1337cookie
1337cookie

Reputation: 101

I had TypeError: The 'compilation' argument must be an instance of Compilation error in an electron/react app after no changes to the project in a windows environment and reinstalling nodejs with the installer resolved it for me. I believe installing some other software modified my environment variables, perhaps something to do with my paths or build tools.

I think this could be an environment problem or something is wrong in your vue.config.js which might be worth posting for anyone looking at this issue in future.

In my research the other common resolution was to insure you don't have multiple instances of webpack installed globally or as dependencies. You can check your global packages with npm -g list. There is a npm command npm dedupe to remove duplicates which might be worth trying. I've read that yarn dedupes automatically so you could also try running your project with yarn instead of npm.

Upvotes: 10

Related Questions