97

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
2
  • 2
    yarn upgrade vue up to 2.4.1 fixed this issue for me Jul 14, 2017 at 0:37
  • A solution for Vue 3 would be nice :| Sep 5 at 10:19

27 Answers 27

62

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
5
  • Like a boss! Yea, that worked for me too. Thanks @Espen. Apr 13, 2017 at 17:21
  • I am having this issue. Tried everythin explained but did not work. getting the same error Mar 18, 2018 at 18:39
  • 4
    I think don't need to delete node_modules, I faced it and just install the template, npm install that's all
    – Osify
    May 3, 2018 at 17:31
  • Per an answer below as an alternative, you can yarn upgrade vue@^2.0.8 and yarn upgrade vue-template-compiler@^2.1.8 Nov 30, 2018 at 15:54
  • A life saver, nothing less.
    – Aviad
    Jul 5 at 22:52
29

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.

1
  • 3
    Do you know why it suddenly broke? I never updated my npm, but suddenly it stopped working. Thanks Sep 6, 2018 at 18:34
23

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

1
  • 1
    .. 2.4.5 => 2.6.3 (for example) Oct 24, 2018 at 14:48
15

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

Vue packages version mismatch error fix

3
  • Fixed it for me :) May 27, 2018 at 18:24
  • Worked for me too, my vue version was 2.5.13 and vue-template-compiler was 2.5.17 but after running the command, it compiled properly. Thanks
    – nensamuel
    Oct 2, 2018 at 16:25
  • Am glad it did @nensamuel Aug 16, 2019 at 9:06
9

This steps helped me:

rm package-lock.json, rm -rf node_modules, npm update, npm install
1
  • This works for me. Thanks! By the way, I've experienced this on Laravel Nova.
    – marlo
    Jan 25, 2022 at 2:14
8

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.

2
  • 2
    This was the solution for me. Same versions for both vue and vue-template-compiler and without the leading ^
    – Juljan
    Mar 2, 2019 at 12:42
  • @Juljan thanks for reminding me about the leading ^ Oct 8, 2020 at 19:50
8

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.

1
  • 2
    The best answer here.
    – Liel Dahan
    Jan 10, 2020 at 10:11
8

I run the following command: yarn global upgrade

That will upgrade any relation that need some upgrading

6

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

This worked for me and your 100%:

  1. Modify package.json: "vue": "^2.6.12" to "vue": "2.6.12"
  2. Delete the folder node_modules
  3. Delete package-lock.json
  4. Run npm install
1
  • 1
    works flawlessly except without doing first step.
    – Gaurav
    Jan 19, 2022 at 20:43
4

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.

3

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
3

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.

0
2

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
2
  • mayday mayday maydya... I am still having this issue Mar 18, 2018 at 18:44
  • delete package-lock.json @ShahidKarimi I edited my answer. Apr 13, 2018 at 16:18
2

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

1
  • worked for me too with a npm audit fix --force after
    – Remus 007
    Jul 4, 2021 at 10:20
2

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

2

NPM have special command to handle such a situation try this:

npm install --legacy-peer-deps
2

Each one of us will have won the solution. So you need to see your vue version from your Error Message. For me, my Error was : [email protected] [email protected]

Ok from the Error Message, I find that the vue version is 2.6.14, So we need to update vue-template-compiler to that version, using:

npm install [email protected] --save-dev
1

You can do it like this:

  1. reinstalling the vue version and the compiler with the same version by example npm i [email protected] npm i [email protected]

or you can do : change it in the package.json

"dependencies": { "vue": "^2.6.14", }, "devDependencies": { "vue-template-compiler": "^2.6.14", },

or you can do : npm update vue-template-compiler if you are using the latest version of vue,

delete the module file and do npm install

0

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

0

Doing a clean install helped using the following command:

npm ci

More detailed documentation about this command can be found here.

0

this command save me.

npm install [email protected] --save-dev

0

maybe you can just run this to change the vue-loader

npm install vue-loader@latest --force

it works with me

0

Need to use the same vue-template-compiler as the version of vue been installed.

So I

npm uninstall vue-template-compiler --save-dev 

and reinstall with

npm install [email protected] --save-dev 

as the version of vue installed in my package-lock.json is 2.6.14.

0

Vue packages version mismatch:

Since the version of the Vue-template-compiler is new than that of the Vue

try to match the version

// Following [email protected] version

npm i [email protected]

or

// Following [email protected] version

npm i [email protected]

0

None of the solutions listed here worked for me. All I had to do was REMOVE the CARET (^) sign from the package versions.
Even thought my vue-template-compiler version was set to ^2.6.14, the caret caused npm install to update its minor version to 2.7.14 and I never knew until I looked at pcakage-lock.json. This solution may only work for certain package versions, but it was the problem for me which was simply fixed by this solution.

So I changed the following:

"vue": "^2.6.14",
"vue-template-compiler": "^2.6.14"

to:

"vue": "2.6.14",
"vue-template-compiler": "2.6.14"
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.