Laravel-mix: Laravel Mix error vue-loader

[byrafaelr]

• Laravel Mix Version: 1.0
• Node Version : 8.0.0
• NPM Version: 5.0.4

• OS: Ubuntu 16

• Laravel Version: 5.4

• PHP Version: 7.0.18

Description:

I can only execute the "npm run dev" command with the commented line
Vue.component ('example', require ('./ components / Example.vue'));

Steps To Reproduce:

When executing the command "npm run dev" the errors appear:

`npm run dev

@ dev /home/wicked/Code/sistema
npm run development

@ development /home/wicked/Code/sistema
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

10% building modules 0/1 modules 1 active ...de/sistema/resources/assets/js/app 10% building modules 1/2 modules 1 active ...de/sistema/resources/assets/js/app 10% building modules 2/3 modules 1 active ...tema/resources/assets/js/bootstrap 10% building modules 2/4 modules 2 active ...a/node_modules/vue/dist/vue.common 10% building modules 3/4 modules 1 active ...tema/resources/assets/js/bootstrap 10% building modules 3/5 modules 2 active ...rces/assets/js/components/Example. 10% building modules 4/5 modules 1 active ...tema/resources/assets/js/bootstrap 10% building modules 5/6 modules 1 active ...ode_modules/webpack/buildin/global 10% building modules 6/7 modules 1 active ...sistema/node_modules/lodash/lodash 10% building modules 6/8 modules 2 active ...e/sistema/node_modules/axios/index 10% building modules 6/9 modules 3 active ...ma/node_modules/jquery/dist/jquery 10% building modules 6/10 modules 4 active ...-sass/assets/javascripts/bootstra 10% building modules 7/10 modules 3 active ...-sass/assets/javascripts/bootstra 10% building modules 8/10 modules 2 active ...-sass/assets/javascripts/bootstra 11% building modules 9/10 modules 1 active ...-sass/assets/javascripts/bootstra 11% building modules 10/11 modules 1 active ...ode_modules/webpack/buildin/modu 11% building modules 11/12 modules 1 active ...stema/node_modules/axios/lib/axi 11% building modules 12/13 modules 1 active ...stema/node_modules/axios/lib/uti 11% building modules 12/14 modules 2 active ...ma/node_modules/axios/lib/defaul 11% building modules 12/15 modules 3 active ...ode_modules/axios/lib/helpers/bi 11% building modules 12/16 modules 4 active ...e_modules/axios/lib/helpers/spre 11% building modules 12/17 modules 5 active .../node_modules/axios/lib/core/Axi 11% building modules 12/18 modules 6 active ...de_modules/axios/lib/cancel/Canc 11% building modules 12/19 modules 7 active ...dules/axios/lib/cancel/CancelTok 11% building modules 12/20 modules 8 active ..._modules/axios/lib/cancel/isCanc 11% building modules 13/20 modules 7 active ..._modules/axios/lib/cancel/isCanc 11% building modules 14/20 modules 6 active ..._modules/axios/lib/cancel/isCanc 11% building modules 15/20 modules 5 active ..._modules/axios/lib/cancel/isCanc 11% building modules 16/20 modules 4 active ..._modules/axios/lib/cancel/isCanc 12% building modules 17/20 modules 3 active ..._modules/axios/lib/cancel/isCanc 12% building modules 18/20 modules 2 active ..._modules/axios/lib/cancel/isCanc 12% building modules 19/20 modules 1 active ..._modules/axios/lib/cancel/isCanc 12% building modules 20/21 modules 1 active ...os/lib/helpers/normalizeHeaderNa 12% building modules 20/22 modules 2 active ...stema/node_modules/process/brows 12% building modules 20/23 modules 3 active .../axios/lib/core/InterceptorManag 12% building modules 20/24 modules 4 active ...les/axios/lib/core/dispatchReque 12% building modules 20/25 modules 5 active ...es/axios/lib/helpers/isAbsoluteU 12% building modules 20/26 modules 6 active ...ules/axios/lib/helpers/combineUR 12% building modules 20/27 modules 7 active ...ode_modules/axios/lib/adapters/x 12% building modules 21/27 modules 6 active ...ode_modules/axios/lib/adapters/x 12% building modules 22/27 modules 5 active ...ode_modules/axios/lib/adapters/x 12% building modules 23/27 modules 4 active ...ode_modules/axios/lib/adapters/x 12% building modules 24/27 modules 3 active ...ode_modules/axios/lib/adapters/x 13% building modules 25/27 modules 2 active ...ode_modules/axios/lib/adapters/x 13% building modules 26/27 modules 1 active ...ode_modules/axios/lib/adapters/x 13% building modules 27/28 modules 1 active ...stema/node_modules/is-buffer/ind 13% building modules 27/29 modules 2 active ...dules/axios/lib/core/transformDa 13% building modules 27/30 modules 3 active ...node_modules/axios/lib/core/sett 13% building modules 27/31 modules 4 active ...modules/axios/lib/helpers/buildU 13% building modules 27/32 modules 5 active ...les/axios/lib/helpers/parseHeade 13% building modules 27/33 modules 6 active .../axios/lib/helpers/isURLSameOrig 13% building modules 27/34 modules 7 active ...modules/axios/lib/core/createErr 13% building modules 27/35 modules 8 active ...ode_modules/axios/lib/helpers/bt 13% building modules 27/36 modules 9 active ..._modules/axios/lib/helpers/cooki 13% building modules 28/36 modules 8 active ..._modules/axios/lib/helpers/cooki 13% building modules 29/36 modules 7 active ..._modules/axios/lib/helpers/cooki 13% building modules 30/36 modules 6 active ..._modules/axios/lib/helpers/cooki 13% building modules 31/36 modules 5 active ..._modules/axios/lib/helpers/cooki 13% building modules 32/36 modules 4 active ..._modules/axios/lib/helpers/cooki 13% building modules 33/36 modules 3 active ..._modules/axios/lib/helpers/cooki 14% building modules 34/36 modules 2 active ..._modules/axios/lib/helpers/cooki 14% building modules 35/36 modules 1 active ..._modules/axios/lib/helpers/cooki 14% building modules 36/37 modules 1 active ...odules/axios/lib/core/enhanceErr 95% emitting

ERROR Failed to compile with 1 errors 20:31:19

error in ./resources/assets/js/components/Example.vue

Module build failed: Error:

Vue packages version mismatch:

• [email protected]
• vue-template-compiler@https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.4.2.tgz

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

at Object.<anonymous> (/home/wicked/Code/sistema/node_modules/vue-template-compiler/index.js:8:9)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/home/wicked/Code/sistema/node_modules/vue-loader/lib/parser.js:1:78)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/home/wicked/Code/sistema/node_modules/vue-loader/lib/loader.js:3:13)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/home/wicked/Code/sistema/node_modules/vue-loader/index.js:1:80)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)

@ ./resources/assets/js/app.js 18:25-60
@ multi ./resources/assets/js/app.js

 Asset    Size  Chunks                    Chunk Names

/js/app.js 1.2 MB 0 [emitted] [big] /js/app
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
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! /home/wicked/.npm/_logs/2017-08-07T23_31_19_327Z-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! /home/wicked/.npm/_logs/2017-08-07T23_31_19_374Z-debug.log
`

[ankurk91]

The error message said everything.
vue-template-compiler and vue version should match.

You can install them like this -

npm install vue-template-compiler@latest vue@latest

This way laravel mix will use your installed versions.

[byrafaelr]

Hello, I was able to solve the problem by deleting the package-lock.json file and running npm install again

[ruchern-chong]

Update your npm version to the latest.

[email protected] had a major bug where it is writing the url to the version string inside package-lock.json.

[louiemiranda]

Worked perfectly after running..

npm install vue-template-compiler@latest vue@latest

Thanks for the tip. This is in 2019, for Laravel 5.8

[m4aax16]

I had the same problem. npm missed the package vue-moments-ago.

npm install vue-template-compiler@latest vue@latest

and

running npm install vue-moments-ago solved the problem

2019, Laravel 6

[ffmit]

I had the same problem. npm missed the package vue-moments-ago.

npm install vue-template-compiler@latest vue@latest

and

running npm install vue-moments-ago solved the problem

2019, Laravel 6

Sorry to say, this didn't help me with the same setup.

My workaround was to comment the line causing the issue in

File /resources/js/app.js
Line 18 Vue.component('example-component', require('./components/ExampleComponent.vue'));

Then it compiled without problem. I guess there should be no side-effects, as it is only an example component. Will let you know if this causes any other issues.