Vue-loader: Vue packages version mismatch error

[jasonsanjose]

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 or vueify, re-installing them should bump vue-template-compiler to the latest.

In our project, we use exact dependencies:

    "vue": "2.0.5",
    "vue-loader": "9.7.0",

Since vue-loader uses caret ranges for vue-template-compiler...

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

...when our Jenkins CI job runs npm install, the latest version of vue-template-compiler will get installed and will mismatch our vue version, causing random build failures whenever vue-template-compiler is upgraded.

A workaround suggested here https://github.com/vuejs/vue/issues/3941 is to re-install vue-loader. We would rather work with exact versions of our dependencies and choose on our own when to upgrade.

To make matters more difficult, we can't use shrinkwrap in our repository due to https://github.com/npm/npm/issues/2679.

Can vue or vue-loader address this case somehow?

[yyx990803]

Have you considered using yarn with a lockfile?

[jasonsanjose]

Not yet. Was hoping not to introduce a yet another tool to our build. :)

We can give that a shot and report back.

It would be nice if this worked with npm or if dependencies were organized in a way where this problem doesn't happen in the first place.

[yyx990803]

Since your team seems to prefer a locked version approach, yarn would fit your workflow much better than npm, both for CI and for development - basically a better shrinkwrap. It's also in most cases a drop-in replacement for npm.

[ernestoalejo]

This should be fixed now in v10.0.0 according to the changelog.

Will that change reach vueify too or do I open a new issue there?

[mehrancodes]

I have the same problem when I'm using Yarn. But when trying npm, gulp compiles the vue components without any problem:

using yarn:

Vue packages version mismatch:

- [email protected]
- [email protected]

my dev dependencies are:

"devDependencies": {
  "gulp": "^3.9.1",
  "laravel-elixir": "^6.0.0-15",
  "laravel-elixir-vue-2": "^0.2.0",
  "laravel-elixir-webpack-official": "^1.0.9"

[mehrancodes]

Just cleaned the yarn cache and tried again, now it works well !

[terenceYu1997]

You need check your vue version in global. I removed the old vue version in global then npm install [email protected] -g,That solved my issue.

[Kristjan-Reinsberg]

same mismatch problem with new spark 4.09 install.

[developerewt]

Fixed for me:

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

│ └─┬ [email protected]
│   └── [email protected]  deduped
└─┬ [email protected] 
  └──` [email protected]

[arvidkahl]

I'll just leave this here if the above does not work.

With yarn, the yarn.lock file can be manually changed to fix this issue. Some library requires a rather old version, so I found that changing the section in yarn.lock actually resolves this issue:

vue-template-compiler@^2.0.0-alpha.8, vue-template-compiler@^2.5.16:
  version "2.5.16"
  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.16.tgz#93b48570e56c720cdf3f051cc15287c26fbd04cb"
  dependencies:
    de-indent "^1.0.2"
    he "^1.1.0"

Relevant part here is vue-template-compiler@^2.0.0-alpha.8, vue-template-compiler@^2.5.16: which you might need to adjust for whatever older version you want or have to override.

[saikathalderr]

i Use Vue cli ui tool to update everything.
it's update everything automatically and then i start project successfully.

[MarkSonn]

For me it was because my Vue version was behind my vue-template-compiler by 4 patches ([email protected] vs [email protected]). I just updated vue both globally and locally and everything worked.

So with Yarn as my package manager:

yarn global add vue
yarn add vue

[MarkSonn]

I'm so glad that I posted my above comment becuase I ran into the same issue and forgot how to solve it. This time, however, my vue-template-compiler was behind.

Get them both up-to-date globally with:

yarn global add vue
yarn global add vue-template-compiler

[soymizra]

Fixed for me:

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

│ └─┬ [email protected]
│   └── [email protected]  deduped
└─┬ [email protected] 
  └──` [email protected] 

This was what I needed... Very thanks!