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

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
`-- laravel-mix@6.0.10
  `-- webpack@5.16.0

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

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 5
Comments: 43

Most upvoted comments

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 😃

georgebotley on Apr 6, 2021

I’m having an issue with this as well.

vyacheslav31 on Feb 10, 2021

The following worked for me…

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

BravadoDude on Feb 26, 2021

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 :

npm install -g yarn
yarn
yarn run dev

srobichaud on Mar 1, 2021

Add to you dev dependencies

"vue-loader": "^16.5.0",
"vue-template-compiler": "^2.6.14",

Then npm i and npm run prod/dev/watch

NikoVonLas on Sep 22, 2021

Turns out I was missing vue-loader…

reppair on Mar 21, 2021

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

Niatik on Feb 12, 2021

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

JeffreyWay on Feb 12, 2021

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.

mstojanovv on Feb 12, 2021