[FIXED] How do I fix a "Vue packages version mismatch" error on Vue js 3

Issue

When I run npm run dev on my nuxt js, I get the following error:

 FATAL                                                                                                                                                          14:16:02  

Vue packages version mismatch:

- vue@3.2.40
- vue-server-renderer@2.7.12

This may cause things to work incorrectly. Make sure to use the same version for both.



  Vue packages version mismatch:

  - vue@3.2.40
  - vue-server-renderer@2.7.12

  This may cause things to work incorrectly. Make sure to use the same version for both.

  at Object.<anonymous> (node_modules\vue-server-renderer\index.js:8:9)
  at Module._compile (node:internal/modules/cjs/loader:1126:14)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
  at Module.load (node:internal/modules/cjs/loader:1004:32)
  at Function.Module._load (node:internal/modules/cjs/loader:839:12)
  at Module.require (node:internal/modules/cjs/loader:1028:19)
  at require (node:internal/modules/cjs/helpers:102:18)
  at Object.<anonymous> (node_modules\@nuxt\vue-renderer\dist\vue-renderer.js:20:27)
  at Module._compile (node:internal/modules/cjs/loader:1126:14)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)

i try to resolve it by delete node modules and npm install, but it seems still not resolve my problem yet,any help on that, its been a while since i try to google it but still not giving me any answer on my problem,this happened when i install github co pilot here is my package.json looks like

{
  "name": "cashier",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/i18n": "^7.2.2",
    "core-js": "^3.15.1",
    "dotenv": "^16.0.2",
    "jwt-decode": "^3.1.2",
    "nuxt": "^2.13.3",
    "vue": "^3.2.40",
    "vue-google-charts": "^1.1.0",
    "vue-server-renderer": "^2.7.12",
    "vuetify": "^2.5.5",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.1",
    "eslint-config-prettier": "^8.3.0",
    "prettier": "^2.3.2"
  }
}

Solution

Nuxt2 and Vue3 are not compatible together, one will use a package version which is incompatible with the other.

And anyway, Nuxt2 is only for a Vue2 usage. If you want to use Vue3, you need to use Nuxt3.

But if you use Nuxt (2 or 3), you don't need to install Vue because it's already baked-in into Nuxt.

It's important that you check that the packages you're using are compatible with their version.

Reinstalling the packages will not fix anything for the simple reason that your package.json is still wrong (some package versions are not compatible with others) waiting for a fix: choosing versions that work all together.

Also, you probably can even remove vue-server-renderer IMO since it is probably a dependency of another package.

PS: Github co-pilot is not related. Dotenv doesn't need to be installed because it's already baked-in into Nuxt. And you should probably not install Vuetify and the module of the same name at the same time. You also have eslint-config-prettier while not using ESlint at all apparently.

You can use this answer to configure ESlint + Prettier properly: https://stackoverflow.com/a/68880413/8816585

Answered By - kissu

Answer Checked By - Marilyn (PHPFixing Volunteer)