在 monorepo 中构建 vue2 和 vue3:来自 vue-template-compiler 的版本不匹配错误
Building for vue2 and vue3 in monorepo: Version mismatch error from vue-template-compiler
假设我在使用 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 有关,但我在这里要求不要在已关闭的问题中回复。
自从 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"
+ }
+ }
+ }
}
}
假设我在使用 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 有关,但我在这里要求不要在已关闭的问题中回复。
自从 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"
+ }
+ }
+ }
}
}