Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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\_logs21-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\_logs21-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
Did you manage to fix this, I'm having the same issue.
I managed to get it working on a separate pc just fine but not on the one I want to use.
The web is littered with this issue but no one seems to have an answer so if you have solved it please let the world know :D
npm doesn't work, hunting for ages and found the solution. Use yarn to install then run npm
first thing i don't understand what you are trying to do.
i mean
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css') <==============
.postCss('resources/css/app.css', 'public/css', [ <============
//
]);
it should be like either
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
or like
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css');
use only one either sass or postCss .
and if using tailwind add Autoprefixer plugin to automatically apply all necessary CSS3 vendor prefixes.
I have the same issue, still looking for a solution.
[EDIT] run yarn install
Not a solution but a workaround, seems something to do with naming
Any solution yet? Doesn't work even when installing with yarn and compiling with npm run ...
Hi all, any news on this problem? I had corrected it with yarn but now is hapenning again even with yarn.
try reinstall node.js it seems that it's a problem related to npm
https://github.com/JeffreyWay/laravel-mix/issues/2791#issuecomment-893148955 I have solved this issue, by using git bash. First, delete node_modules then run on git bash, 'npm install' and then 'npm run watch' or 'npm run dev' It's worked.
Please or to participate in this conversation.