Vetur: 0.6.1 - Vue packages version mismatch

[frankdugan3]

After upgrading to 0.6.1, I am having a different issue than the other ones posted thus far. The language server crashes with this error stating the the vue and vue-template-compiler are mismatched versions. I also tried removing and reinstalling the extension to update the dependencies to match, but the mismatch still happens, so it must be an issue with a package.json file somewhere.

/home/frankdugan3/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/vue-template-compiler/index.js:8
  throw new Error(
  ^

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.

    at Object.<anonymous> (/home/frankdugan3/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/vue-template-compiler/index.js:8:9)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/frankdugan3/.vscode/extensions/octref.vetur-0.6.1/client/server/modes/typescriptMode.js:5:31)
    at Module._compile (module.js:556:32)
[Error - 9:12:49 AM] Connection to server got closed. Server will not be restarted.

[octref]

Do you have vue-template-compiler as a dep in your repo?

[sandersn]

94 adds a dependency on vue-template-compiler for vetur. It's shrinkwrapped to 2.2.1. I guess that's what is causing the mismatch, but I'm not sure how to resolve it. (I'm also not sure why it says 2.2.6)

I remember seeing that dependencies needed to be treated specially by VS Code extensions, so maybe that is the first place to look.

[frankdugan3]

I do have vue-template-compiler as a dep in my app, and it's at version 2.2.6 which matches my version of vue. Since vetur has it's own version and node_modules directory, shouldn't it be isolated from mine?

[sandersn]

Yes, I think that's the bug. I think that vue-template-compiler isn't installed as dependency in vetur's node_modules, so module resolution ends up finding it in yours instead.

[octref]

Sorry my bad -- messed up the server versions when publishing. If you try:

cd ~/.vscode/extensions/octref.vetur-0.6.1/client/server/
npm ls --depth=0

Should report [email protected].

But this

cd ~/.vscode/extensions/octref.vetur-0.6.1/server/
npm ls --depth=0

Should report [email protected].

[octref]

Can you try if this works for you?

vetur-0.6.2.vsix.zip

Instruction: https://code.visualstudio.com/docs/editor/extension-gallery#_install-from-a-vsix

[frankdugan3]

Still get the mismatch because vue is at 2.1.10:

Vue packages version mismatch:

- [email protected]
- [email protected]

[octref]

Seems vue-template-compiler needs to be the same version as vue.

Curious what's your project doing that it has to use vue-template-compiler instead of vue-loader?

[frankdugan3]

It's been a long time since I set it up, but I think the reason was that I was having version mismatches with vue-loader, so I had to explicitly declare the version I wanted. I was also experimenting with separating the js from the template. I just tried removing vue-template-compiler from my package.json and reinstalling all my modules, but my webpack setup didn't like it, so I'll have to look into that some more. Not sure if I need it or not anymore.

Either way, my version of vue is 2.2.6, so clearly veturor some other plugin is installing its own mismatched version of [email protected].

[frankdugan3]

Note: The official webpack template (including the simple version) also includes vue-template-compiler in its package.json. It may simply be needed when using webpack.

[sandersn]

I think this would probably be solved by adding vue-template-compiler to the extension's package manifest, similar to the other bugs linked from #136.

[octref]

@frankdugan3 Can you upgrade to 0.6.2 and see if that solves your problem?

[frankdugan3]

Still having the same crash, still the same version mismatch. Here's my best guess at what's happening: I did not see vue specified in any package.json files. vue-template-compiler is listed and locked to version 2.2.1. Since the vue version isn't specified, something else is pulling in whatever version it prefers. I think vue needs to be added to the package.json with a matching version to vue-template-compiler. I've had to do this in my own projects.

[octref]

@frankdugan3 Can you post the crash log? Does it still say vue-template-compiler 2.2.6 or now it's 2.2.1?

I think vue needs to be added to the package.json with a matching version to vue-template-compiler. I've had to do this in my own projects.

So you are saying you install matching versions of vue and vue-template-compiler in your project, and this crash doesn't happen to you?

[frankdugan3]

When I specify matching versions of vue and vue-template-compiler in my project, the project doesn't crash. This plugin still does. I think the reason is that the plugin itself isn't specifying it's own matching version of vue. Again, I'd like to note that the version of vue reported in the crash is not the version I have installed for my project, so something else is pulling in that dependency. vetur is the only Vue plugin I have installed.

/home/frankdugan3/.vscode/extensions/octref.vetur-0.6.2/client/server/node_modules/vue-template-compiler/index.js:8
  throw new Error(
  ^

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.

    at Object.<anonymous> (/home/frankdugan3/.vscode/extensions/octref.vetur-0.6.2/client/server/node_modules/vue-template-compiler/index.js:8:9)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/frankdugan3/.vscode/extensions/octref.vetur-0.6.2/client/server/modes/typescriptMode.js:5:31)
    at Module._compile (module.js:556:32)
[Error - 11:22:06 AM] Connection to server got closed. Server will not be restarted.

[sandersn]

@octref do you think it's worth adding vue to the extension manifest as well? I didn't think it was necessary since it's not listed in npm-shrinkwrap of either client or server.

[octref]

@sandersn
vue-template-compiler's index.js:

try {
  var vueVersion = require('vue').version
} catch (e) {}

var packageName = require('./package.json').name
var packageVersion = require('./package.json').version
if (vueVersion && vueVersion !== packageVersion) {
  throw new Error(
    '\n\nVue packages version mismatch:\n\n' +
    '- vue@' + vueVersion + '\n' +
    '- ' + packageName + '@' + packageVersion + '\n\n' +
    'This may cause things to work incorrectly. Make sure to use the same version for both.\n' +
    'If you are using vue-loader@>=10.0, simply update vue-template-compiler.\n' +
    'If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump ' + packageName + ' to the latest.\n'
  )
}

module.exports = require('./build')

Think a better way is to remove this check and include vue-template-compiler's code directly (or use a fork of it).

I feel it's not worth it to add vue to just circumvent this error checking.

[sandersn]

Yes, I think copying vue-template-compiler's code is the best fix for right now. Maybe later we can contribute an improvement to vue's package structure or its version detection.

[octref]

Sounds good. From vetur's perspective:

• If vue-template-compiler is present in project workspace, use it
• Otherwise use our modified vue-template-compiler without the version match check

[sandersn]

I don't have time to do it right now, though. Do you have time?

[octref]

It's fine I'll do it tonight.

[octref]

Published with 0.6.3, but without the part of using vue-template-compiler from users' workspace.

[frankdugan3]

Resolves my issue. Thank you for the hard work, this was a tricky one!