在 monorepo 中构建 vue2 和 vue3：来自 vue-template-compiler 的版本不匹配错误

Question

假设我在使用 pnpm 的 monorepo 中有两个包。一个用于 Vue@3 (package-a)，另一个用于 Vue@2 (package-b)。作为记录，它们都依赖于名为 core.

的第三个包

您可以在下面找到它的样子：

.
├── .npmrc
├── .nvmrc
├── package.json
├── packages
│   ├── package-a
│   │   ├── index.ts
│   │   ├── node_modules
│   │   │   ├── .bin
│   │   │   │   ├── tsc
│   │   │   │   ├── tsserver
│   │   │   │   ├── vite
│   │   │   │   └── vue-tsc
│   │   │   ├── @myscope
│   │   │   │   └── core -> ../../../core
│   │   │   ├── @vitejs
│   │   │   │   └── plugin-vue -> ../../../../node_modules/.pnpm/@vitejs+plugin-vue@2.3.3_vite@2.9.9+vue@3.2.36/node_modules/@vitejs/plugin-vue
│   │   │   ├── typescript -> ../../../node_modules/.pnpm/typescript@4.6.4/node_modules/typescript
│   │   │   ├── vite -> ../../../node_modules/.pnpm/vite@2.9.9/node_modules/vite
│   │   │   ├── vue -> ../../../node_modules/.pnpm/vue@3.2.36/node_modules/vue
│   │   │   └── vue-tsc -> ../../../node_modules/.pnpm/vue-tsc@0.34.16_typescript@4.6.4/node_modules/vue-tsc
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.node.json
│   │   └── vite.config.ts
│   ├── package-b
│   │   ├── index.ts
│   │   ├── node_modules
│   │   │   ├── .bin
│   │   │   │   ├── tsc
│   │   │   │   ├── tsserver
│   │   │   │   ├── vite
│   │   │   │   └── vue-tsc
│   │   │   ├── @myscope
│   │   │   │   └── core -> ../../../core
│   │   │   ├── typescript -> ../../../node_modules/.pnpm/typescript@4.6.4/node_modules/typescript
│   │   │   ├── vite -> ../../../node_modules/.pnpm/vite@2.9.9/node_modules/vite
│   │   │   ├── vite-plugin-vue2 -> ../../../node_modules/.pnpm/vite-plugin-vue2@2.0.1_dj3dtukdyynhbiqf2xbv2ocyei/node_modules/vite-plugin-vue2
│   │   │   ├── vue -> ../../../node_modules/.pnpm/vue@2.6.14/node_modules/vue
│   │   │   ├── vue-template-compiler -> ../../../node_modules/.pnpm/vue-template-compiler@2.6.14/node_modules/vue-template-compiler
│   │   │   └── vue-tsc -> ../../../node_modules/.pnpm/vue-tsc@0.34.16_typescript@4.6.4/node_modules/vue-tsc
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.node.json
│   │   └── vite.config.ts
│   └── core
│       ├── index.ts
│       └── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

在packages/package-a/package.json中：

{
  "name": "@myscope/package-a",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "vue-tsc --noEmit && vite build"
  },
  "dependencies": {
    "@myscope/core": "workspace:*",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "typescript": "^4.5.4",
    "vite": "^2.9.9",
    "vue-tsc": "^0.34.7"
  }
}

在packages/package-b/package.json

{
  "name": "@myscope/package-b",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "vue-tsc --noEmit && vite build"
  },
  "dependencies": {
    "@myscope/core": "workspace:*",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "typescript": "^4.5.4",
    "vite": "^2.9.9",
    "vite-plugin-vue2": "^2.0.0",
    "vue-template-compiler": "^2.6.14",
    "vue-tsc": "^0.34.7"
  }
}

当我在 package-b (Vue@2) 中运行 pnpm run build 时，我收到版本不匹配错误，而它不应该：

> vue-tsc --noEmit && vite build

failed to load config from /path/to/my/project/monorepo/packages/package-b/vite.config.ts
error during build:
Error: 

Vue packages version mismatch:

- vue@3.2.36 (/path/to/my/project/monorepo/node_modules/.pnpm/vue@3.2.36/node_modules/vue/index.js)
- vue-template-compiler@2.6.14 (/path/to/my/project/monorepo/node_modules/.pnpm/vue-template-compiler@2.6.14/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> (/path/to/my/project/monorepo/node_modules/.pnpm/vue-template-compiler@2.6.14/node_modules/vue-template-compiler/index.js:10:9)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/path/to/my/project/monorepo/node_modules/.pnpm/vite-plugin-vue2@2.0.1_dj3dtukdyynhbiqf2xbv2ocyei/node_modules/vite-plugin-vue2/dist/utils/descriptorCache.js:34:42)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/path/to/my/project/monorepo/node_modules/.pnpm/vite-plugin-vue2@2.0.1_dj3dtukdyynhbiqf2xbv2ocyei/node_modules/vite-plugin-vue2/dist/main.js:35:27)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

似乎已解决的版本不遵循 package.json 并使用 Vue@3 而不是 Vue@2。我不明白为什么。这可能是关于 vue-template-compiler 如何解析 Vue 之类的错误吗？

我发现一个“肮脏”的解决方法是在项目的根目录下添加 hoist=false to .npmrc 但我不知道这样做可能会产生什么副作用。不管怎样，有没有更简洁的方法来解决这个问题？

PS。这可能与 https://github.com/vuejs/vue/issues/11828 有关，但我在这里要求不要在已关闭的问题中回复。

Answer 1

自从 I got help 在 VueJS discord 服务器上回答我自己的问题。

There are two possible solutions that both worked for me independently:

a) move vue-tsc to the root package.json. This is what I did as I try and keep all my project tooling out of the individual packages.

b) use "pnpm.packageExtentions" in package.json to add vue@2 as a peer dependency of vue-template-compiler

选项 a) 从 pnpm@7 开始似乎不起作用，因为 breaking change:

Dependencies of the root workspace project are not used to resolve peer dependencies of other workspace projects #4469

带有 pnpm.packageExtensions 的选项 B 工作正常。无需再将 nohoist=false 添加到 .npmrc。

diff --git i/package.json w/package.json
index 95cda08..182e89d 100644
--- i/package.json
+++ w/package.json
@@ -41,5 +41,14 @@
   "packageManager": "pnpm@7.1.3",
   "engines": {
     "node": ">=16.15.0"
+  },
+  "pnpm": {
+    "packageExtensions": {
+      "vue-template-compiler": {
+        "peerDependencies": {
+          "vue": "^2.6.14"
+        }
+      }
+    }
   }
 }

在 monorepo 中构建 vue2 和 vue3：来自 vue-template-compiler 的版本不匹配错误

Building for vue2 and vue3 in monorepo: Version mismatch error from vue-template-compiler

vue.js

vite

pnpm

pnpm-workspace