Skip to content

Vite 8.1 doesn't resolve tsconfigPaths in CSS @import directives #22766

Description

@TimonLukas

Describe the bug

Until Vite 8.0.16, it was possible to define path aliases in tsconfig.json, e.g.

{
  "include": [/* ... */],
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

and with resolve.tsconfigPaths === true, this alias was replaced not just in imports in JS/TS files, but also in e.g. CSS files:

@import "@/styles/main.css";

This unfortunately no longer works since Vite 8.1, because the vite:css plugin throws the error that postcss can't find the unresolved import.

IMO likely cause in the `vite:css` plugin I spent some time debugging this issue for withastro/astro#17163, and it seems this broke due to the "No fallback to the outermost tsconfig" change in Rolldown 1.1.2. I've tried every possible combination to ensure all files involved are included in the tsconfig, but nothing works.

I suspect it's because the Vite CSS module is not passing along the actual importer, but instead passes path.join(basedir, '*') as the importer to the resolve function. This makes oxc-resolver think that the importer is not included in the tsconfig. After patching the CSS plugin to pass the path of the real importer instead, the build goes through as expected.

Reproduction

https://github.com/TimonLukas/vite-8.1-tsconfig-paths-bug

Steps to reproduce

  1. Clone repo
  2. pnpm i
  3. pnpm build

System Info

System:
    OS: Linux 7.0 Fedora Linux 39 (Container Image)
    CPU: (16) x64 AMD Ryzen 7 7700X 8-Core Processor
    Memory: 52.09 GB / 62.43 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.16.0 - ~/.asdf/installs/nodejs/24.16.0/bin/node
    Yarn: 4.9.2 - ~/.asdf/installs/nodejs/24.16.0/bin/yarn
    npm: 11.13.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 11.8.0 - ~/.asdf/installs/nodejs/24.16.0/bin/pnpm
    bun: 1.3.5 - ~/.bun/bin/bun
  npmPackages:
    vite: ^8.1.0 => 8.1.0

Used Package Manager

npm

Logs

Click to expand!
> pnpm build      
$ tsc && vite build
vite v8.1.0 building client environment for production...
Unable to resolve `@import "@/styles/imported.css"` from /path/to/vite-8.1-tsconfig-paths-bug/src/styles
✓ 8 modules transformed.
✗ Build failed in 26ms
error during build:
Build failed with 1 error:

[plugin vite:css] /path/to/vite-8.1-tsconfig-paths-bug/src/styles/main.css:undefined:NaN
Error: [postcss] ENOENT: no such file or directory, open '@/styles/imported.css'
    at async open (node:internal/fs/promises:640:25)
    at async Object.readFile (node:internal/fs/promises:1287:14)
    at async Object.load (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/node.js:22151:17)
    at async loadImportContent (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/postcss-import.js:392:19)
    at async Promise.all (index 0)
    at async resolveImportId (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/postcss-import.js:378:20)
    at async parseStyles (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/postcss-import.js:331:4)
    at async Object.Once (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/postcss-import.js:455:20)
    at async LazyResult.runAsync (/path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/lazy-result.js:293:11)
    at async runPostCSS (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/node.js:22205:19)
    at aggregateBindingErrorsIntoJsError (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/rolldown/dist/shared/error-T-E9reEy.mjs:48:18)
    at unwrapBindingResult (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/rolldown/dist/shared/error-T-E9reEy.mjs:18:128)
    at #build (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/rolldown/dist/shared/rolldown-build-DDMH4mGm.mjs:3256:34)
    at async buildEnvironment (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/node.js:32575:66)
    at async Object.build (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/node.js:32997:19)
    at async Object.buildApp (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/node.js:32994:153)
    at async CAC.<anonymous> (file:///path/to/vite-8.1-tsconfig-paths-bug/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/cli.js:777:3) {
  errors: [Getter/Setter]
}
[ELIFECYCLE] Command failed with exit code 1.

Validations

Metadata

Metadata

Assignees

Labels

feat: cssp3-downstream-blockerBlocking the downstream ecosystem to work properly (priority)

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions