Let's say I have two packages in a monorepo using pnpm. One for Vue@3 (package-a), one other for Vue@2 (package-b). For the record, they both depend on a third package called core.
You can find what it looks like below:
.
├── .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
In 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"
}
}
In 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"
}
}
When I run pnpm run build in package-b (Vue@2) I get the version mismatch error whereas it shouldnt:
> 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.
It seems that the resolved version doesn't follows package.json and uses Vue@3 instead of Vue@2. I don't understand why. Could this be a bug about how vue-template-compiler resolves Vue or something?
A "dirty" workaround I've found to get it work is to add hoist=false to .npmrc at the project's root but I don't know what are the possible side-effects I can get by doing this. Anyway, is there a cleaner way to fix this?
PS. This can be related to https://github.com/vuejs/vue/issues/11828 but I'm asking here do do not reply in a closed issue.
Answering my own question since I got help on the VueJS discord server.
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
Option a) doesn't seem to work as of pnpm@7 because of a breaking change:
Dependencies of the root workspace project are not used to resolve peer dependencies of other workspace projects #4469
Option B with pnpm.packageExtensions is working fine. No need to add nohoist=false anymore to .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"
+ }
+ }
+ }
}
}