Skip to content

Feature Request: Config file bundling doesn't resolve tsconfig paths from referenced projects #3659

Description

@jansepke

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:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

…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 loadTsConfigresolveSolutionTsconfigForFile 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/configbundle-n-require bundleConfigFile.
    • Existing references-aware resolution used only for source scanning: @pandacss/nodepackages/node/src/tsconfig-utils.ts resolveSolutionTsconfigForFile (added in the tsconfck → custom loader refactor).

issue creation assisted by AI

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions