How do I fix a "Vue packages version mismatch" error on Laravel Spark v4.0.9?

Question

When I run npm run dev on a Laravel Spark v4.0.9 app, I get the following error:

Module build failed: Error:  Vue packages version mismatch:  - [email protected] - [email protected]  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. 

My package.json looks like this:

{   "private": true,   "scripts": {     "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",     "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"   },   "dependencies": {     "axios": "^0.15.2",     "bootstrap": "^3.0.0",     "cross-env": "^3.2.3",     "jquery": "^2.1.4",     "js-cookie": "^2.1.0",     "laravel-mix": "0.*",     "moment": "^2.10.6",     "promise": "^7.1.1",     "sweetalert": "^1.1.3",     "underscore": "^1.8.3",     "urijs": "^1.17.0",     "vue": "~2.0.1",     "vue-resource": "^1.2.0",     "vue-router": "^2.2.1",     "vue-truncate-filter": "^1.1.6",     "vuejs-datepicker": "^0.6.2"   },   "devDependencies": {     "browser-sync": "^2.18.8",     "browser-sync-webpack-plugin": "^1.1.4"   } } 

I have tried the following (at different times, not in order):

• deleted node_modules and npm install
• tried just running yarn and yarn upgrade
• removing vue-loader and reinstalling
• specifying exact versions of vue and vue-template-compiler rather than leaving it up to npm to install or yarn to figure out dependencies
• removing other non-essential packages (vue-router, vue-truncate-filter, vuejs-datepicker) and trying all of the above again
• banging my head against a wall

Answer 1

This worked for me:

1. Modify package.json:

   “vue”: “^2.0.8", “vue-template-compiler”: “^2.1.8" 

2. Delete node_modules

3. Run npm install

Answer 2

For vue ^2.5.17.

In your package.json

Simply Add this in devDependencies or update the version of vue-template-compiler:

• "vue-template-compiler": "^2.5.17"

You wil have this output:

"devDependencies": {   ...   "lodash": "^4.17.4",   "popper.js": "^1.14.4",   "vue": "^2.5.17", // <= note the version   "vue-template-compiler": "^2.5.17" // <= note the version }, 

After that, run:

npm install 

Npm will update only the updated packages.