An issue has surfaced in the Vite monorepo setup where TypeScript respects @ aliases due to separate tsconfig files (visible in IDE), but Vite does not differentiate them among workspaces during build.
The project utilizes Yarn 1.x with workspaces, TypeScript 4.9, Vite 3.2, Lerna 6.4 (which should not impact the current problem).
The structure of the project adheres to a standard monorepo setup:
packages/
foo-bar/
src/
index.ts
package.json
tsconfig.json
vite.config.ts
yarn.lock
foo-baz/
(same as above)
foo-shared/
src/
qux.ts
quux.ts
package.json
tsconfig.json
yarn.lock
lerna.json
package.json
tsconfig.json
yarn.lock
When one package (foo-bar) imports a module from another (foo-shared):
packages/foo-bar/src/index.ts:
import qux from `@foo/shared/qux';
During build, another package incorrectly resolves local aliased imports to the wrong package because Vite is unaware of tsconfig aliases:
packages/foo-shared/src/qux.ts:
import quux from `@/quux'; // resolves to packages/foo-bar/src/quux.ts and errors
The error message reads like this:
[vite:load-fallback] Could not load ...\packages\foo-bar\src/quux (imported by ../foo-shared/src/qux.ts): ENOENT: no such file or directory, open '...\packages\foo-bar\src\stores\quux' error during build:
foo-shared currently serves as a dummy package that is not built independently; it is only aliased and used in other packages.
packages/foo-bar/vite.config.ts:
// ...
export default defineConfig({
resolve: {
alias: {
'@': path.join(__dirname, './src'),
'@foo/shared': path.join(__dirname, '../foo-shared/src'),
},
},
/ * some irrelevant options */
});
packages/foo-bar/tsconfig.json and packages/foo-shared/tsconfig.json are similar:
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@foo/shared/*": ["../foo-shared/src/*"]
},
"typeRoots": [
"./node_modules/@types",
"../../node_modules/@types"
]
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.vue"
],
"exclude": [
"node_modules"
],
}
I attempted to switch resolve.alias with the vite-tsconfig-paths plugin without success. The plugin did not alter the aliases as expected, and its compatibility for this scenario remains uncertain.
Is there a way to configure Vite to correctly resolve paths starting with "@" based on the parent module's path?