Vue packages version mismatch error

[jasonsanjose]

Vue packages version mismatch:

- vue@2.0.5
- vue-template-compiler@2.0.6

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 vuejs/vue#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 npm/npm#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:

- vue@2.1.3
- vue-template-compiler@2.0.3

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 vue@2.2.4 -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

│ └─┬ vue-loader@9.9.5
│   └── vue-template-compiler@2.2.6  deduped
└─┬ vue-template-compiler@2.2.6 
  └──` he@1.1.1 

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