Laravel-mix: Laravel 8 - Mix 6.0.10 - [webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation

[kinger251285]

• Laravel Mix Version: 6.0.10
• Node Version (node -v): 14.15.4
• NPM Version (npm -v): 6.14.10
• OS: Windows 10

Description:

When i run npm run dev i get this error:

[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation

Full Error:

[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (C:\users\user\desktop\newlaravelprojects\UpdatedSignUpApp\node_modules\webpack\lib\NormalModule.js:179:10)
    at C:\users\user\desktop\newlaravelprojects\UpdatedSignUpApp\node_modules\vue-loader\lib\plugin-webpack5.js:36:70
    at Hook.eval [as call] (eval at create (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:102:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:991:26)
    at C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:1033:29
    at Hook.eval [as callAsync] (eval at create (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:1028:28)
    at C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:471:12
    at Compiler.readRecords (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:869:11)
    at C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:468:11
    at Hook.eval [as callAsync] (eval at create (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:465:20
    at Hook.eval [as callAsync] (eval at create (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `mix`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development 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!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-01-22T14_22_54_749Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev 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!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-01-22T14_22_54_876Z-debug.log

No duplicate of webpack - npm list webpack outputs:

$ npm list webpack
C:\users\user\desktop\newlaravelprojects\UpdatedSignUpApp
`-- [email protected]
  `-- [email protected]

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */


mix.js('resources/js/app.js', 'public/js').vue()
    .sass('resources/sass/app.scss', 'public/css')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

If i remove the .vue() at the end of the mix.js line i get this error:

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: The 'compilation' argument must be an instance of Compilation
    at getCompilationHooks (C:\users\user\desktop\newlaravelprojects\UpdatedSignUpApp\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
    at C:\users\user\desktop\newlaravelprojects\UpdatedSignUpApp\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:30:19
    at Hook.eval [as call] (eval at create (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:990:30)
    at C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:1033:29
    at Hook.eval [as callAsync] (eval at create (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:1028:28)
    at Compiler.runAsChild (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:495:8)

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: The 'compilation' argument must be an instance of Compilation
    at getCompilationHooks (C:\users\user\desktop\newlaravelprojects\UpdatedSignUpApp\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
    at C:\users\user\desktop\newlaravelprojects\UpdatedSignUpApp\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:30:19
    at Hook.eval [as call] (eval at create (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:990:30)
    at C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:1033:29
    at Hook.eval [as callAsync] (eval at create (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:1028:28)
    at Compiler.runAsChild (C:\Users\user\Desktop\NewLaravelProjects\UpdatedSignUpApp\node_modules\webpack\lib\Compiler.js:495:8)

Any help appreciated

Steps To Reproduce:

Fresh install of Laravel 8 on windows

[Niatik]

@kinger251285 There is an answer.
https://github.com/vuejs/vue-loader/issues/1781

npm update -g @vue/cli
i upgraded Vue CLI and it worked

[Wulfheart]

@Niatik didn't work for me.

[kinger251285]

@kinger251285 There is an answer.
https://github.com/vuejs/vue-loader/issues/1781

npm update -g @vue/cli
i upgraded Vue CLI and it worked

This didnt work for me.

The only work around i could find is to run Yarn Install rather than npm install.

I read somewhere else there could be a naming issue with spaces when using npm install (not the case in my project). But yarn install seems to have done the trick. Workaround rather than a fix.

[Wulfheart]

@kinger251285 Ok. Wait what? This is ridiculous! Unfortunately this is the first workaround that works.

[ivanradojevic-web-dev]

@kinger251285 I try Yarn, but have an error:
sh: 1: mix: not found

[vyacheslav31]

I'm having an issue with this as well.

[elambro]

@kinger251285 There is an answer.
https://github.com/vuejs/vue-loader/issues/1781

npm update -g @vue/cli
i upgraded Vue CLI and it worked

I just tried that and npm went a bit crazy:

17:11 CreateApplication $ npm -v
bash: /usr/local/bin/npm: No such file or directory
17:12 CreateApplication $ sudo npm -v
node:internal/modules/cjs/loader:928
  throw err;
  ^

Error: Cannot find module 'semver'
Require stack:
- /usr/share/npm/lib/utils/unsupported.js
- /usr/share/npm/bin/npm-cli.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/usr/share/npm/lib/utils/unsupported.js:2:14)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/share/npm/lib/utils/unsupported.js',
    '/usr/share/npm/bin/npm-cli.js'
  ]
}

[Wulfheart]

@elambro Please try the following steps:

1. Delete your node_modules folder
2. Run yarn install
3. Run npm run dev

Does it work now?

[elambro]

@elambro Please try the following steps:

1. Delete your node_modules folder

2. Run yarn install

3. Run npm run dev

Does it work now?

Nope. I purged npm and node, reinstalled, nuked node_modules, tried yarn, nuked again. Pulling my hair out over this one.

[Wulfheart]

Feel you.

[mstojanovv]

Same issue here.

Only works if I remove the node_modules folder then execute yarn install, however, if any other package is installed with npm stops working again.

[JeffreyWay]

Is anyone encountering this on a Mac, or does it seem to exclusively be a Windows issue?

[Niatik]

Is anyone encountering this on a Mac, or does it seem to exclusively be a Windows issue?

This seems to happen only on windows and seems to be related to vue

[Wulfheart]

@Niatik I don't use it with vue.

[Niatik]

@Wulfheart When I do not use vue, this error does not appear

[ivanradojevic-web-dev]

Is anyone encountering this on a Mac, or does it seem to exclusively be a Windows issue?

I am currently on Windows/Homestead and using Vue.js.
At first it worked, and suddenly an error occurred.

[mstojanovv]

Is anyone encountering this on a Mac, or does it seem to exclusively be a Windows issue?

I am currently on Windows/Homestead and using Vue.js.
At first it worked, and suddenly an error occurred.

Same here, Windows and Homestead with Laravel and Vue.js

[JeffreyWay]

Okay. Things like this are incredibly difficult to debug. It's tough to know if there's anything we can change on the Mix end to fix it. It could be an npm bug on Windows, or a vue-loader problem, or something webpack-specific.

If it's an issue related to file paths, then I think we can resolve that.

[thecrypticace]

Okay, so I just poked around a bit. I can't reproduce this at the moment but the code surrounding this is in vue-loader:

    compiler.hooks.compilation.tap(id, compilation => {
      const normalModuleLoader = require('webpack/lib/NormalModule').getCompilationHooks(compilation).loader
      // … snip …
    })

This reads to me like the compilation compiler hook isn't being passed the right thing which would be a webpack bug.

[elambro]

Is anyone encountering this on a Mac, or does it seem to exclusively be a Windows issue?

Ubuntu 20.04, with an outdated Laravel Nova app, while updating a Vue Nova component

[thecrypticace]

@kinger251285 or anyone else who can reproduce this on a fresh install only. Could you gist your yarn.lock or package-lock.json file? And possibly zip/archive your node_modules and share it?

[afedkina1024]

Yes, I have even two fresh Laravel 8 installations that does not compile because of this issue.
First time it happened right after installing Vue scaffolding.
Next day I created a new project, did all the same from the beginning and it was ok that time, the project worked, but when I installed Vue Router and tried to recompile, this error happened again. I can share the source code if this helps.

I run this on Windows 10. After this happened we started this project again with Laravel 6 and it works stable, but it would be better to use the latest version.

[afedkina1024]

https://drive.google.com/file/d/1EZaZdu8Na5lF5NKuKjfIFcIhnuZPtkTG/view?usp=sharing
https://drive.google.com/file/d/1Ps78O3XVb2Q5Jxh8uduK15e0ccSWaGyo/view

This is source code of the projects that do not work
Also attached the error screenshot and the log files that npm referred to.

2021-02-13T11_18_46_648Z-debug.log
2021-02-13T11_18_46_475Z-debug.log

[BravadoDude]

The following worked for me...

Use Git Bash to execute "npm install" and then "npm run dev" to compile, also from Git Bash.

[Wulfheart]

@BravadoDude this implies that there is an issue with Powershell/CMD.

[BravadoDude]

@Wulfheart I agree, whilst playing around with some commands to try and figure out the error I got another error saying something like 'node could not rename "some file"' and that it did not have the permissions from windows to do so (this was in vs code terminal). That led me to try Git Bash as it does run with administrator privileges.

Maybe running your code editor as 'administrator' will work? EDIT<- this does not work...

[Dawied]

The following worked for me...

Use Git Bash to execute "npm install" and then "npm run dev" to compile, also from Git Bash.

Yields the exact same error

[BravadoDude]

The following worked for me...
Use Git Bash to execute "npm install" and then "npm run dev" to compile, also from Git Bash.

Yields the exact same error
@Dawied - try "npm run watch" instead. For myself, this is not working in vs-code integrated terminal, still only working from GitBash.

[srobichaud]

I've encounter the same problem with a fresh install of Laravel 8. I have this package.json :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.10",
        "postcss": "^8.1.14",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.11",
        "webpack-cli": "^4.5.0"
    },
    "dependencies": {
        "vue": "^2.6.11",
        "vue-router": "^3.3.4"
    }
}

Using yarn seems to solve the problem for me. I didn't have yarn so I had to :

1. npm install -g yarn
2. yarn
3. yarn run dev

[RobHowdle]

I've encounter the same problem with a fresh install of Laravel 8. I have this package.json :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.10",
        "postcss": "^8.1.14",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.11",
        "webpack-cli": "^4.5.0"
    },
    "dependencies": {
        "vue": "^2.6.11",
        "vue-router": "^3.3.4"
    }
}

Using yarn seems to solve the problem for me. I didn't have yarn so I had to :

1. `npm install -g yarn`

2. `yarn`

3. `yarn run dev`

Running Laravel 8 with Jetstream Inertia.
npm run watch/ dev does not work.

The above steps worked for me.

[reppair]

I am using yarn by default, reinstalled it though, still not working. No problems in the main laravel build, only in my nova-components. GNU/Linux system.

[reppair]

Turns out I was missing vue-loader..

[UdaraJay]

Had the same issue; this seems like a pretty random fix but using npm run watch after purging node_modules and installing modules via npm install. Got this error when I tried to use Yarn instead.

[TheAbhishekIN]

I've encounter the same problem with a fresh install of Laravel 8. I have this package.json :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.10",
        "postcss": "^8.1.14",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.11",
        "webpack-cli": "^4.5.0"
    },
    "dependencies": {
        "vue": "^2.6.11",
        "vue-router": "^3.3.4"
    }
}

Using yarn seems to solve the problem for me. I didn't have yarn so I had to :

1. npm install -g yarn
2. yarn
3. yarn run dev

on windows 10 it works with above steps

[georgebotley]

We've been converting our various Mix standalone projects to version 6.0 over the past few weeks and it seems Mix isn't all the good at detecting Vue versions (any longer). After sharing a lot of your frustrations we tried deleting all the node_modules, re-defining the package.json files and all sorts.

We use Vue for a lot of our projects and after removing .vue() from the mix file it compiled fine. This made me wonder if Mix was aware of our Vue version so following the Mix API I added .vue({version: 2}); and tried again. It once again failed. Looking through node_modules I noticed vue-loader wasn't installed. Past versions of Mix (which could auto-detect better for whatever reason) would install this or prompt for it. So running npm install vue-loader and then npx mix compiled without issue.

Hope this helps a future dev out :)

[alladinmelico]

I solved this problem by running the cmd as administrator. Then, run the command npm run dev.

[alainjr10]

The following worked for me...

Use Git Bash to execute "npm install" and then "npm run dev" to compile, also from Git Bash.

Been using git bash since. it didn't work for me

[alainjr10]

I've encounter the same problem with a fresh install of Laravel 8. I have this package.json :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.10",
        "postcss": "^8.1.14",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.11",
        "webpack-cli": "^4.5.0"
    },
    "dependencies": {
        "vue": "^2.6.11",
        "vue-router": "^3.3.4"
    }
}

Using yarn seems to solve the problem for me. I didn't have yarn so I had to :

1. npm install -g yarn
2. yarn
3. yarn run dev

this worked for me. cheers