Description
When panda.config.ts (or its imports) uses a TypeScript path alias defined in a referenced project of a solution-style tsconfig.json, config bundling fails to resolve the alias. Panda should resolve config-file aliases from project references, the same way it already does for source-file scanning.
Problem Statement/Justification
This is the default setup produced by the current Vite React+TS template. Vite scaffolds a solution-style root tsconfig.json that only contains:
…and puts compilerOptions.paths (e.g. "~/*": ["./src/*"]) in tsconfig.app.json, not in the root.
Panda's config loader bundles panda.config.ts via bundle-n-require, which calls esbuild without a tsconfig option. esbuild therefore auto-resolves the nearest tsconfig.json (the root solution file) and reads compilerOptions.paths/baseUrl from that file only — it does not follow references. So when panda.config.ts (or a transitively-imported file such as a theme/recipe module) imports via ~/…, panda codegen / panda prepare fails to resolve the module.
Notably, Panda's source-file scanning already handles this correctly: @pandacss/node's loadTsConfig → resolveSolutionTsconfigForFile walks references to find the child tsconfig that includes each source file and reads its paths. The config-bundling path was never given the same treatment, so the two behave inconsistently.
The current workaround is to duplicate baseUrl + paths into the root tsconfig.json, which is easy to miss and drifts out of sync with tsconfig.app.json.
Proposed Solution or API
Make config bundling references-aware, reusing the existing resolveSolutionTsconfigForFile logic so it resolves paths from the referenced project that contains panda.config.ts. For example, resolve the effective tsconfig for the config file and pass it to esbuild:
// bundle-n-require / bundleConfigFile
await build({
// ...
tsconfig: effectiveTsconfigForConfigFile, // resolved via references, not just the nearest tsconfig.json
})
Alternatives
- Expose a config-bundle
tsconfig option (or CLI flag) so users can point the config-bundling step at tsconfig.app.json explicitly.
- Document the limitation and the current workaround (duplicate
baseUrl/paths into the root tsconfig.json) for solution-style setups.
- Use relative imports in
panda.config.ts — but this is fragile, since any transitively imported file that uses ~/… still breaks bundling.
Additional Information
- Reproduces with the default Vite React + TS template's
tsconfig.json / tsconfig.app.json split plus a ~/ alias used inside panda.config.ts.
- Relevant code:
- Config bundling (no
tsconfig passed to esbuild): @pandacss/config → bundle-n-require bundleConfigFile.
- Existing references-aware resolution used only for source scanning:
@pandacss/node → packages/node/src/tsconfig-utils.ts resolveSolutionTsconfigForFile (added in the tsconfck → custom loader refactor).
issue creation assisted by AI
Description
When
panda.config.ts(or its imports) uses a TypeScript path alias defined in a referenced project of a solution-styletsconfig.json, config bundling fails to resolve the alias. Panda should resolve config-file aliases from project references, the same way it already does for source-file scanning.Problem Statement/Justification
This is the default setup produced by the current Vite React+TS template. Vite scaffolds a solution-style root
tsconfig.jsonthat only contains:{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ] }…and puts
compilerOptions.paths(e.g."~/*": ["./src/*"]) intsconfig.app.json, not in the root.Panda's config loader bundles
panda.config.tsviabundle-n-require, which calls esbuild without atsconfigoption. esbuild therefore auto-resolves the nearesttsconfig.json(the root solution file) and readscompilerOptions.paths/baseUrlfrom that file only — it does not followreferences. So whenpanda.config.ts(or a transitively-imported file such as a theme/recipe module) imports via~/…,panda codegen/panda preparefails to resolve the module.Notably, Panda's source-file scanning already handles this correctly:
@pandacss/node'sloadTsConfig→resolveSolutionTsconfigForFilewalksreferencesto find the child tsconfig that includes each source file and reads itspaths. The config-bundling path was never given the same treatment, so the two behave inconsistently.The current workaround is to duplicate
baseUrl+pathsinto the roottsconfig.json, which is easy to miss and drifts out of sync withtsconfig.app.json.Proposed Solution or API
Make config bundling references-aware, reusing the existing
resolveSolutionTsconfigForFilelogic so it resolvespathsfrom the referenced project that containspanda.config.ts. For example, resolve the effective tsconfig for the config file and pass it to esbuild:Alternatives
tsconfigoption (or CLI flag) so users can point the config-bundling step attsconfig.app.jsonexplicitly.baseUrl/pathsinto the roottsconfig.json) for solution-style setups.panda.config.ts— but this is fragile, since any transitively imported file that uses~/…still breaks bundling.Additional Information
tsconfig.json/tsconfig.app.jsonsplit plus a~/alias used insidepanda.config.ts.tsconfigpassed to esbuild):@pandacss/config→bundle-n-requirebundleConfigFile.@pandacss/node→packages/node/src/tsconfig-utils.tsresolveSolutionTsconfigForFile(added in thetsconfck→ custom loader refactor).issue creation assisted by AI