Laravel Mix error vue-loader

• 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:

• vue@2.4.2
• 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.

[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