Add path to resolved vue package to vue-template-compiler's "version mismatch" error

[mcmillenb]

What problem does this feature solve?

I was recently attempting to build docs via the documentation package, which has the vue-template-compiler package as a dependency. I ran into an issue where the build was failing because vue-template-compiler was throwing a "Vue packages version mismatch" error.

I did not have vue installed globally or in the node_modules/ of my project's root directory, and it took me a while to figure out how the package was determining the version of vue and where it was resolving on my machine (I had accidentally installed an npm project in a parent directory creating a node_modules/ folder with the vue package in it).

It would be helpful, when the vue-template-compiler throws the "version mismatch" error, to display the path the to vue package that has been resolved. That way, it would be immediately clear which specific vue package on the dev's machine the compiler is comparing its version to.

In the Vue Forum discussion, I asked Linus Borg if he thought a pull request to add this feature would be helpful, and he said it might be. I have created a fork and updated the error message on that forked repo. I'm submitting this feature request to be approved before making the pull request. I also am not sure how to write a unit test for the build error messaging and would appreciate guidance.

What does the proposed API look like?

Updated error message looks like this:

Vue packages version mismatch:

- [email protected]
- [email protected]

Path to vue package: /Users/brianmcmillen/tests/docs-test/node_modules/vue/dist/vue.runtime.common.js

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.

[posva]

I don't think there is a test for this. Usually, you can search in the test folder for the warning messages and change that test 🙂
I think it would make sense to display both paths (vue and vue-template-compiler) on the same line as the package. Something like

- [email protected] (/Users/brianmcmillen/tests/docs-test/node_modules/vue/dist/vue.runtime.common.js)
- [email protected] (/Users/brianmcmillen/tests/docs-test/node_modules/vue...)

[posva]

I forgot, go ahead and create the PR!

[mcmillenb]

Great! Just submitted a pull request. It's my first one.. let me know if I left anything out.

[posva]

Closing as the PR got merged