Vue包版本不匹配求助：vue@2.6.14与vue-server-renderer@2.7.10

遇到的错误：

Vue packages version mismatch: vue@2.6.14 vue-server-renderer@2.7.10

当前环境：使用Nuxt@2.15.8（该版本依赖vue-server-renderer@2.6.14），依赖配置如下：

"dependencies": {
  "@nuxtjs/axios": "5.5.4",
  "@nuxtjs/style-resources": "0.1.2",
  "@nuxtjs/svg-sprite": "0.5.2",
  "@sendgrid/mail": "6.4.0",
  "body-parser": "1.19.0",
  "chokidar": "3.5.2",
  "clipboard": "2.0.4",
  "compression": "1.7.4",
  "cors": "2.8.5",
  "express": "4.17.1",
  "feed": "4.1.0",
  "gsap": "3.1.1",
  "lazysizes": "5.3.2",
  "lodash": "4.17.21",
  "lru-cache": "5.1.1",
  "moment": "2.24.0",
  "mongoose": "5.9.10",
  "morgan": "1.10.0",
  "nuxt": "2.15.8",
  "pm2": "4.4.0",
  "sanitize-html": "2.5.1",
  "sitemap": "2.2.0",
  "stickyfilljs": "2.1.0",
  "svg4everybody": "2.1.9",
  "swiper": "6.8.4",
  "url-polyfill": "1.1.8",
  "vue-waypoint": "3.2.2"
},
"devDependencies": {
  "@babel/core": "7.18.10",
  "@babel/eslint-parser": "7.18.9",
  "eslint": "8.23.0",
  "eslint-config-standard": "17.0.0",
  "eslint-plugin-vue": "9.3.0",
  "eslint-webpack-plugin": "2.7.0",
  "normalize-scss": "7.0.1",
  "postcss-preset-env": "6.7.0",
  "sass": "1.54.7",
  "sass-loader": "10.3.1"
}

完整错误堆栈：

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

at Object.<anonymous> (/usr/src/app/node_modules/vue-server-renderer/index.js:8:9)
at Module._compile (node:internal/modules/cjs/loader:1120:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
at Module.load (node:internal/modules/cjs/loader:998:32)
at Module._load (node:internal/modules/cjs/loader:839:12)
at Module.require (node:internal/modules/cjs/loader:1022:19)
at Hook._require.Module.require (/usr/src/app/node_modules/require-in-the-middle/index.js:101:39)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/usr/src/app/node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:19:27)
at Module._compile (node:internal/modules/cjs/loader:1120:14)

一、排查冲突根源 #

• 执行依赖树查询命令，定位引入高版本vue-server-renderer的包：
  • npm：npm ls vue-server-renderer
  • yarn：yarn list vue-server-renderer
    命令会输出所有依赖该包的模块及其版本，直接找到触发版本不一致的源头。
• 你的package.json中所有依赖都使用固定版本（无^/~前缀），冲突大概率来自某个依赖的间接依赖未锁定版本，安装时拉取了最新兼容版。

二、解决冲突的具体步骤 #

1. 强制锁定vue-server-renderer版本
   在package.json的dependencies中添加固定版本的vue-server-renderer，覆盖其他依赖的版本要求：

   "dependencies": {
     // 保留原有所有依赖
     "vue-server-renderer": "2.6.14"
   }
   

2. 清理缓存并重装依赖

   • npm：

     npm cache clean --force
     rm -rf node_modules package-lock.json
     npm install
     

   • yarn：

     yarn cache clean
     rm -rf node_modules yarn.lock
     yarn install
     

3. 针对性调整冲突依赖（可选）
   如果通过依赖树查到具体是某个第三方包（比如vue-waypoint这类Vue插件）引入了高版本Vue，可以尝试：

   • 升级该包到适配Nuxt@2.15.8的最新稳定版
   • 降级该包到不依赖高版本Vue的旧版本

内容的提问来源于stack exchange，提问作者MicroMan