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:

- 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

`yarn upgrade vue` up to 2.4.1 fixed this issue for me – Connor Leech Jul 14 '17 at 00:37 — Connor Leech, Jul 14 '17 at 00:37

score 61 · Accepted Answer · answered Apr 13 '17 at 17:19

61

This worked for me:

Modify package.json:

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

Delete node_modules
Run npm install

answered Apr 13 '17 at 17:19

Espen

734
6
3

Like a boss! Yea, that worked for me too. Thanks @Espen. – Nate Ritter Apr 13 '17 at 17:21
I am having this issue. Tried everythin explained but did not work. getting the same error – Shahid Karimi Mar 18 '18 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 03 '18 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` – Nate Ritter Nov 30 '18 at 15:54
A life saver, nothing less. – Aviad Jul 05 '23 at 22:52

Jose Seie · Answer 2 · 2019-12-30T10:19:23.450

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.

edited Dec 30 '19 at 10:19

answered Aug 17 '18 at 03:04

Jose Seie

892
11
12

3

Do you know why it suddenly broke? I never updated my npm, but suddenly it stopped working. Thanks – Philipp Mochine Sep 06 '18 at 18:34

score 23 · Answer 3 · answered Oct 24 '18 at 14:46

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

.. `2.4.5` => `2.6.3` (for example) – Kamil Ismagilov Oct 24 '18 at 14:48 — Kamil Ismagilov, Oct 24 '18 at 14:48

Allan Philip Barku · Answer 4 · 2018-07-30T16:05:21.690

15

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

edited Jul 30 '18 at 16:05

answered May 17 '18 at 06:00

Allan Philip Barku

231
3
7

Fixed it for me :) – Sunil Sandhu May 27 '18 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 02 '18 at 16:25
Am glad it did @nensamuel – Allan Philip Barku Aug 16 '19 at 09:06

score 9 · Answer 5 · answered Sep 07 '20 at 12:26

9

This steps helped me:

rm package-lock.json, rm -rf node_modules, npm update, npm install

answered Sep 07 '20 at 12:26

Alexandr Shmidt

129
1
7

This works for me. Thanks! By the way, I've experienced this on Laravel Nova. – marlo Jan 25 '22 at 02:14

score 8 · Answer 6 · answered Nov 10 '17 at 08:36

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.

answered Nov 10 '17 at 08:36

Bhojendra Rauniyar

83,432
35
168
231

2

This was the solution for me. Same versions for both vue and vue-template-compiler and without the leading ^ – Juljan Mar 02 '19 at 12:42
@Juljan thanks for reminding me about the leading ^ – Samuel Aiala Ferreira Oct 08 '20 at 19:50

score 8 · Answer 7 · answered Dec 16 '19 at 11:49

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.

answered Dec 16 '19 at 11:49

Cristianjs19

765
1
9
15

2

The best answer here. – Liel Dahan Jan 10 '20 at 10:11

score 8 · Answer 8 · answered Jan 12 '20 at 18:42

8

I run the following command: yarn global upgrade

That will upgrade any relation that need some upgrading

answered Jan 12 '20 at 18:42

Skywalker

1,717
1
22
25

score 6 · Answer 9 · answered Jan 21 '18 at 15:03

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.

score 6 · Answer 10 · answered Dec 02 '20 at 11:08

6

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

answered Dec 02 '20 at 11:08

Ali Raza

670
5
15

1

works flawlessly except without doing first step. – Gaurav Jan 19 '22 at 20:43

score 4 · Answer 11 · answered Feb 21 '20 at 16:53

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.

score 3 · Answer 12 · answered Nov 29 '18 at 06:38

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

answered Nov 29 '18 at 06:38

Billal Begueradj

20,717
43
112
130

GSangram · Answer 13 · 2019-01-16T10:49:24.733

3

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.

edited Jan 16 '19 at 10:49

answered Jan 16 '19 at 10:18

GSangram

123
10

Oscar Intecfra · Answer 14 · 2018-04-13T16:16:16.450

2

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

edited Apr 13 '18 at 16:16

answered Nov 23 '17 at 16:41

Oscar Intecfra

101
1
3

mayday mayday maydya... I am still having this issue – Shahid Karimi Mar 18 '18 at 18:44
delete package-lock.json @ShahidKarimi I edited my answer. – Oscar Intecfra Apr 13 '18 at 16:18

score 2 · Answer 15 · answered Mar 26 '19 at 17:03

2

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

answered Mar 26 '19 at 17:03

Diego Herrera

41
3

worked for me too with a npm audit fix --force after – Remus 007 Jul 04 '21 at 10:20

score 2 · Answer 16 · answered Sep 29 '21 at 14:37

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

score 2 · Answer 17 · answered May 18 '22 at 06:47

2

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

npm install --legacy-peer-deps

answered May 18 '22 at 06:47

devzom

676
1
9
19

Kendouci Ilyes · Answer 18 · 2022-11-20T09:53:00.910

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 : vue@2.6.14 vue-template-compiler@2.7.14

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 vue-template-compiler@2.6.14 --save-dev

edited Nov 20 '22 at 09:53

answered Nov 20 '22 at 09:51

Kendouci Ilyes

31
3

score 1 · Answer 19 · answered Jul 28 '22 at 08:51

You can do it like this:

reinstalling the vue version and the compiler with the same version by example npm i vue@2.6.14 npm i vue-template-compiler@2.6.14

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

score 0 · Answer 20 · answered Sep 02 '18 at 18:12

0

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

answered Sep 02 '18 at 18:12

Emeke Ajeh

933
1
10
16

score 0 · Answer 21 · answered Sep 17 '20 at 11:20

0

Doing a clean install helped using the following command:

npm ci

More detailed documentation about this command can be found here.

answered Sep 17 '20 at 11:20

Amit Kumbharkar

124
1
3

score 0 · Answer 22 · answered Jul 08 '22 at 20:58

0

this command save me.

npm install vue-template-compiler@2.5.16 --save-dev

answered Jul 08 '22 at 20:58

Saintilien Wilson

41
2

score 0 · Answer 23 · answered Sep 18 '22 at 12:51

0

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

npm install vue-loader@latest --force

it works with me

answered Sep 18 '22 at 12:51

cxkeeley

209
3
3

score 0 · Answer 24 · answered Nov 09 '22 at 09:25

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 vue-template-compiler@2.6.14 --save-dev

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

Passyah · Answer 25 · 2023-01-29T15:21:02.130

0

Vue packages version mismatch:

vue@2.0.8
vue-template-compiler@2.2.6

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

try to match the version

// Following vue@2.0.8 version

npm i vue-template-compiler@2.0.8

or

// Following vue-template-compiler@2.2.6 version

npm i vue@2.2.6

edited Jan 29 '23 at 15:21

answered Jan 29 '23 at 15:17

Passyah

1
2

score 0 · Answer 26 · answered Aug 30 '23 at 23:35

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"

score -1 · Answer 27 · answered Jan 07 '20 at 18:23

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

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

27 Answers27

Linked