How do I fix a "Vue packages version mismatch" error on Laravel Spark v4.0.9?
vue.jsVuejs2Laravel Sparkvue.js Problem Overview
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:
- vue@2.0.8
- vue-template-compiler@2.2.6
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
andnpm install
- tried just running
yarn
andyarn 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
vue.js Solutions
Solution 1 - vue.js
This worked for me:
-
Modify
package.json
:“vue”: “^2.0.8", “vue-template-compiler”: “^2.1.8"
-
Delete
node_modules
-
Run
npm install
Solution 2 - vue.js
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.
Solution 3 - vue.js
Don't need to remove all node_modules
folder. Just update packages: vue
, vue-template-compiler
and vue-server-renderer
by @latest
flag and it should help for any cases with dismatched versions of vue packages.
npm i vue-template-compiler@latest --save
npm i vue-server-renderer@latest --save
--save
will automatically update version in your package.json
file. @latest
means install latest available version of package. If you need to update vue
do it by the same way like we do it in above example.
Also, you always can check new versions for updates by command: npm outdated
. It shows you all list of packages, that should be updated.
By the way, npm update
command update only minor and patches versions, but it unusles when you want to update major version. For example npm update
will not update 2.4.5
=> 3.0.1
, but can update
Solution 4 - vue.js
Running the following command helped me
npm install [email protected] --save-dev
NB. Replace the version number with the right version that you need. In my case the version of vue was 2.5.16 and vue-template-compiler was 2.5.13 hence I updated the vue-template-compiler to the version of the vue.
Hope this helps someone
Solution 5 - vue.js
Updating Vue was the solution for me.
npm i vue@latest --save
Want to mention that previously I do the steps described in Kamil' Ocean answer:
npm i vue-template-compiler@latest --save
npm i vue-server-renderer@latest --save
Once updated Vue it worked.
Solution 6 - vue.js
This steps helped me:
rm package-lock.json, rm -rf node_modules, npm update, npm install
Solution 7 - vue.js
I run the following command:
yarn global upgrade
That will upgrade any relation that need some upgrading
Solution 8 - vue.js
Here, vue template compiler compiles the vue template. If you use vue one version and vue-template-compiler another version, that's a problem.
Run this command
npm update vue-template-compiler
This will fix the issue and it will install a vue template compiler same version like vue js version.
Solution 9 - vue.js
Check dependency for vue
and replace with exact in dev dependency for vue-template-compiler
.
For eg.
"dependencies": {
"vue": "^2.5.2",
},
"devDependencies": {
"vue-template-compiler": "^2.5.3",
},
Should be replaced with:
"dependencies": {
"vue": "2.5.2",
},
"devDependencies": {
"vue-template-compiler": "2.5.2",
},
And run the npm install
again.
Solution 10 - vue.js
This worked for me and your 100%:
- Modify package.json: "vue": "^2.6.12" to "vue": "2.6.12"
- Delete the folder node_modules
- Delete package-lock.json
- Run npm install
Solution 11 - vue.js
From the accepted answer, instead of deleting node_modules folder and run again yarn install
, you can simply upgrade those 2 packages directly:
yarn upgrade vue@^2.0.8
yarn upgrade vue-template-compiler@^2.1.8
Solution 12 - vue.js
Try this : npm install [email protected] --save-dev
Converting the vue-template-compiler
version to same as vue
version (for this case 2.0.8
) worked for me. Give it a try.
Solution 13 - vue.js
This worked for me:
- Modify package.json: "vue": "^2.5.2" to "vue": "2.5.*"
- Delete the folder node_modules
- Delete package-lock.json
- Run npm install
Solution 14 - vue.js
I used npm install vue --save
and that worked for me
Solution 15 - vue.js
I just had to make these two versions match ( by changing the compiler value match the "vue" value in the package.json and run npm install:
"vue": "^2.6.11",
"vue-template-compiler": "^2.6.11"
npm install
No deleting or anything else in this case.
Solution 16 - vue.js
Doing a clean install helped using the following command:
> npm ci
More detailed documentation about this command can be found here.
Solution 17 - vue.js
As seen in the error message:
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.
I was using a higher vue-loader so I ran the command
npm update vue-template-compiler
and that worked like charm
Solution 18 - vue.js
You don't need to delete node_modules folder.
- [email protected]
- [email protected]
Update the package with a lower version number. In this case, npm update vue
.
Optionally, you may want to npm update vue-loader
too
Solution 19 - vue.js
NPM have special command to handle such a situation try this:
npm install --legacy-peer-deps
Solution 20 - vue.js
[SOLVED!!]
I went to the very same package.json file of the vue-template-compiler that is complaining, changed the version of the package in there and run yarn, like so:
~/.config/yarn/global/node_modules/vue-jscodeshift-adapter/node_modules/vue-template-compiler/package.json:
OLD:
"name": "vue-template-compiler",
"version": "2.6.11"
NEW:
"name": "vue-template-compiler",
"version": "2.6.10"
Run:
yarn
Source: https://github.com/vuejs/vue/issues/10932
Note: path to package.json and versions are specific for my case.