nuxt: Vue packages version mismatch

Issue

I am trying to host a nuxt app on firebase hosting. Steps to reproduce can be found in this guide: Deploying a Nuxt SSR (server-side-rendering) app to Google Firebase

When running firebase deploy --only functions I get this error:

Vue packages version mismatch:

- vue@2.6.12
- vue-server-renderer@2.6.14

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

Versions

node: v16.14.0 Dependencies:

"dependencies": {
    "core-js": "^3.19.3",
    "firebase-admin": "^10.0.2",
    "firebase-functions": "^3.14.1",
    "nuxt": "^2.13.3",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "vuetify": "^2.6.1",
    "webpack": "^5.69.1"

  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/vuetify": "^1.12.3",
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.8.0",
    "eslint": "^8.4.1",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "firebase-functions-test": "^0.2.0",
    "prettier": "^2.5.1",
    "typescript": "^3.8.0"
  },

Steps to reproduce

Deploying a Nuxt SSR (server-side-rendering) app to Google Firebase

What is Expected?

The deploy should succeed

What is actually happening?

It is breaking due to a version mismatch between vue and vue-server-renderer

Attempted solutions that failed

Vue packages version mismatch #6823

removed package-locked.json
deleted node_modules
ran the following npm install and npm audit fix then npm update. npm update was actually the game changer for me.

This did not work

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 16 (4 by maintainers)

Most upvoted comments

This now just happened to me after having updated Nuxt.js from v2.17.1 to v2.17.2.

I got the following mismatch:

   ╭────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                            │
   │   ✖ Nuxt Fatal Error                                                                       │
   │                                                                                            │
   │   Error:                                                                                   │
   │                                                                                            │
   │   Vue packages version mismatch:                                                           │
   │                                                                                            │
   │   - vue@2.7.14                                                                             │
   │   - vue-server-renderer@2.7.15                                                             │
   │                                                                                            │
   │   This may cause things to work incorrectly. Make sure to use the same version for both.   │
   │                                                                                            │
   │                                                                                            │
   ╰────────────────────────────────────────────────────────────────────────────────────────────╯

I was able to solve this by running:

npm update vue

Which updates Vue to v2.7.15 in package-lock.json

Unrelated to the issue, but related to the update to Nuxt.js v2.17.2, I also had to run npm update fork-ts-checker-webpack-plugin to stop getting the error TypeError: Cannot set property mark of #<Object> which has only a getter

davidsandoz on Oct 24, 2023

I also had a similar problem with the package version But it is caused by other packages @nuxtjs/composition-api @nuxtjs/vuetify…etc

Since vue2.6 is currently stable enough, I recommend locking all versions at once

"overrides": {
      "vue": "2.6.14",
      "vue-server-renderer": "2.6.14",
      "vue-template-compiler": "2.6.14",
}

Then delete your package manager’s lock file, and reinstall

rm -f package-lock.json
npm install

if you use yarn, use resolutions

"resolutions": {
    "vue": "2.6.14",
    "vue-server-renderer": "2.6.14",
    "vue-template-compiler": "2.6.14",
}

Of course you can also use vue2.7

"overrides": {
      "vue": "~2.7",
      "vue-server-renderer": "~2.7",
      "vue-template-compiler": "~2.7",
}

maou-shonen on Aug 1, 2022

This isn’t a Nuxt issue as such. You need to update your lock file.

danielroe on Oct 27, 2023

Just to be clear, Nuxt 2 works fine with Vue 2.7.

You may need to refresh your lockfile, use overrides or resolutions, or manually remove incorrect 2.6.* versions from it, but these are package manager issues and not caused by Nuxt.

You are right, my wording was not appropriate I have edited my reply

maou-shonen on Aug 1, 2022