How do I fix a “Vue packages version mismatch” err

问题:

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

回答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

回答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.

回答3:

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

回答4:

Running the following command helped me

npm install vue-template-compiler@2.5.16 --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

Vue packages version mismatch error fix

回答5:

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.

回答6:

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.

回答7:

Try this : npm install vue-template-compiler@2.0.8 --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.

回答8:

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

回答9:

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.

回答10:

This worked for me:

1. Modify package.json: "vue": "^2.5.2" to "vue": "2.5.*"
2. Delete the folder node_modules
3. Delete package-lock.json
4. Run npm install

回答11:

I run the following command: yarn global upgrade

That will upgrade any relation that need some upgrading

回答12:

You don't need to delete node_modules folder.

- vue@2.0.8 - vue-template-compiler@2.2.6

Update the package with a lower version number. In this case, npm update vue. Optionally, you may want to npm update vue-loader too

回答13:

I used npm install vue --save and that worked for me

回答14:

[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.