Reproduction link or steps
-
Create tsconfig.json with a path alias:
{
"compilerOptions": {
"paths": { "#/*": ["./src/*"] }
},
"include": ["src/**/*"]
}
-
Set resolve.tsconfigPaths: true in vite.config.ts:
import { defineConfig } from "vite";
export default defineConfig({
resolve: { tsconfigPaths: true },
});
-
Import using the alias in src/main.tsx:
import { Foo } from "#/components/Foo.js";
(src/components/Foo.tsx exists.)
-
Run vite (dev server) → error. Run vite build → succeeds.
https://stackblitz.com/edit/vitejs-vite-jufdca1x?file=tsconfig.app.json,src%2Fcomponents%2FFoo.tsx,src%2FApp.tsx,src%2Fmain.tsx&terminal=dev
What is expected?
resolve.tsconfigPaths: true resolves tsconfig path aliases in both the dev server and the production build.
What is actually happening?
The dev server fails with:
[plugin:vite:import-analysis] Failed to resolve import "#/components/Foo.js" from "src/main.tsx". Does the file exist?
vite build (Rolldown pipeline) succeeds and transforms all modules correctly. resolve.tsconfigPaths: true appears to only apply to the Rolldown build, not the dev server.
Workaround: adding an explicit resolve.alias alongside tsconfigPaths: true fixes the dev server:
import { fileURLToPath } from "node:url";
resolve: {
tsconfigPaths: true,
alias: { "#/": fileURLToPath(new URL("./src/", import.meta.url)) },
}
System Info
System:
OS: Linux 6.17 Pop!_OS 22.04 LTS
CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
Memory: 45.88 GB / 62.53 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 24.13.0 - /home/dasprid/.nvm/versions/node/v24.13.0/bin/node
Yarn: 1.22.22 - /home/dasprid/.nvm/versions/node/v24.13.0/bin/yarn
npm: 11.6.2 - /home/dasprid/.nvm/versions/node/v24.13.0/bin/npm
pnpm: 10.32.1 - /home/dasprid/.nvm/versions/node/v24.13.0/bin/pnpm
Browsers:
Chrome: 146.0.7680.80
Firefox: 148.0.2
Firefox Developer Edition: 148.0.2
Any additional comments?
No response
Reproduction link or steps
Create
tsconfig.jsonwith a path alias:{ "compilerOptions": { "paths": { "#/*": ["./src/*"] } }, "include": ["src/**/*"] }Set
resolve.tsconfigPaths: trueinvite.config.ts:Import using the alias in
src/main.tsx:(
src/components/Foo.tsxexists.)Run
vite(dev server) → error. Runvite build→ succeeds.https://stackblitz.com/edit/vitejs-vite-jufdca1x?file=tsconfig.app.json,src%2Fcomponents%2FFoo.tsx,src%2FApp.tsx,src%2Fmain.tsx&terminal=dev
What is expected?
resolve.tsconfigPaths: trueresolves tsconfig path aliases in both the dev server and the production build.What is actually happening?
The dev server fails with:
vite build(Rolldown pipeline) succeeds and transforms all modules correctly.resolve.tsconfigPaths: trueappears to only apply to the Rolldown build, not the dev server.Workaround: adding an explicit
resolve.aliasalongsidetsconfigPaths: truefixes the dev server:System Info
System: OS: Linux 6.17 Pop!_OS 22.04 LTS CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K Memory: 45.88 GB / 62.53 GB Container: Yes Shell: 5.1.16 - /bin/bash Binaries: Node: 24.13.0 - /home/dasprid/.nvm/versions/node/v24.13.0/bin/node Yarn: 1.22.22 - /home/dasprid/.nvm/versions/node/v24.13.0/bin/yarn npm: 11.6.2 - /home/dasprid/.nvm/versions/node/v24.13.0/bin/npm pnpm: 10.32.1 - /home/dasprid/.nvm/versions/node/v24.13.0/bin/pnpm Browsers: Chrome: 146.0.7680.80 Firefox: 148.0.2 Firefox Developer Edition: 148.0.2Any additional comments?
No response