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

[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 😃

[vyacheslav31]

I’m having an issue with this as well.