Vue 3 package version mismatch

Question

I'm trying to update a package I made to vue 3, and I'm facing an issue with vue-template-compiler.

I tried to follow a similar post that had some kind of a similar problem but it doesn't seems to work for me.(Vue package Version mismatch)

I got the following error:

> @utt/[email protected] build:es
> cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es

[!] Error: 

Vue packages version mismatch:

- [email protected] (C:\projects\UTT-Message-System\module\node_modules\vue\index.js)
- [email protected] (C:\projects\UTT-Message-System\module\node_modules\vue-template-compiler\package.json)

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.

Error: 

Vue packages version mismatch:

- [email protected] (C:\projects\UTT-Message-System\module\node_modules\vue\index.js)
- [email protected] (C:\projects\UTT-Message-System\module\node_modules\vue-template-compiler\package.json)

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> (C:\projects\UTT-Message-System\module\node_modules\vue-template-compiler\index.js:10:9)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Object.require.extensions.<computed> [as .js] (C:\projects\UTT-Message-System\module\node_modules\rollup\dist\shared\loadConfigFile.js:516:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\projects\UTT-Message-System\module\node_modules\@vue\component-compiler\dist\compiler.js:26:26)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Object.require.extensions.<computed> [as .js] (C:\projects\UTT-Message-System\module\node_modules\rollup\dist\shared\loadConfigFile.js:516:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)

[nodemon] app crashed - waiting for file changes before starting...

Update: I used rollup-plugin-vue package, and its not compatable with vue 3, so I installed rollup-plugin-vue@next and now I don't get vue-template-compiler inside my package-lock.json file.

But now I have a new error on the plugin babel, and I'm trying to resolve this issue, so if anyone can share any ideas it would be much appreciated:

[!] (plugin babel) SyntaxError: C:\projects\UTT-Message-System\module\Components\MessageContainer.vue?vue&type=style&index=0&id=3d58915e&lang.css: Unexpected token (2:0)

  1 |
> 2 | ._messageList_yig6l_3 {
    | ^
  3 |   position: absolute;
  4 |   display: flex;
  5 |   flex-direction: column;
Components\MessageContainer.vue?vue&type=style&index=0&id=3d58915e&lang.css (2:0)
SyntaxError: C:\projects\UTT-Message-System\module\Components\MessageContainer.vue?vue&type=style&index=0&id=3d58915e&lang.css: Unexpected token (2:0)

  1 |
> 2 | ._messageList_yig6l_3 {
    | ^
  3 |   position: absolute;
  4 |   display: flex;
  5 |   flex-direction: column;
    at Parser._raise (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\error.js:134:45)
    at Parser.raiseWithData (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\error.js:129:17)
    at Parser.raise (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\error.js:78:17)
    at Parser.unexpected (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\util.js:179:16)
    at Parser.parseExprAtom (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:1202:20)
    at Parser.parseExprSubscripts (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:613:23)
    at Parser.parseUpdate (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:593:21)
    at Parser.parseMaybeUnary (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:560:23)
    at Parser.parseExprOps (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:364:23)
    at Parser.parseMaybeConditional (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:329:23)

[nodemon] app crashed - waiting for file changes before starting...

Thanks for the help.

You're using Vue 2 compiler with Vue 3. This is what the error says. — Estus Flask
– Estus Flask, Commented Jun 14, 2021 at 8:04
Thanks for the respond, after I removed the vue-template-compiler from the package.json, there is still the same error. — Meyer Buaharon
– Meyer Buaharon, Commented Jun 14, 2021 at 10:35
Check lock file, it can be seen there where this dependency comes from. Check stackoverflow.com/help/mcve . It's impossible to answer the question at this point. — Estus Flask
– Estus Flask, Commented Jun 14, 2021 at 10:39
Yeah you were right, I had to check more into this and found out I was using an old version of rollup-plugin-vue so I updated it and now I'll try to find a solution to solve it. — Meyer Buaharon
– Meyer Buaharon, Commented Jun 14, 2021 at 11:12

Ryan M · Accepted Answer · 2022-07-07 11:02:07Z

26

remove "vue-template-compiler" from your app with

npm uninstall vue-template-compiler

then install compiler-sfc which replaces vue-template-compiler

npm i -D @vue/compiler-sfc

make sure there is no vue-template-compiler on your package.json and you see vue/compiler-cfs

since you've removed vue-template-compiler then vue-loader will complain to need it to work so upgrade it as well to work for vue 3 with the following command

npm install vue-loader@next

since you're doing upgrade, there might happen other errors here and there depending on your project configuration. but keeping on solving, soon you'll get it running

edited Jul 7, 2022 at 11:02

Ryan M♦

20.6k35 gold badges75 silver badges85 bronze badges

answered Jul 18, 2021 at 9:55

ndotie

2,19021 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Olle Härstedt Over a year ago

I don't know why, but for some reason I end up with vue-template-compiler in package-lock.json even after running the uninstall command. Any clues? Hm looks like vueify requires it.

wajdi_jurry Over a year ago

You saved me🌹, I spent a lot of hours trying to solve it.

Collectives™ on Stack Overflow

Vue 3 package version mismatch

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related