issue with `include` and `${configDir}` in `references` tsconfig

[hi-ogawa]

Description

• Downstream issue Vitest does not work with ${configDir} and references of tsconfig.json vitest-dev/vitest#7420 (comment)

For the following tsconfig files, parse("src/b.ts") and parseNative("src/b.ts") work differently:

// tsconfig.json
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.vi-configdir.json"
    }
  ]
}

// tsconfig.vi-configdir.json
{
  "compilerOptions": {
    "module": "ES2022",
    "moduleResolution": "bundler",
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
  },
  "include": ["${configDir}/src/*"]
}

❯ node repro.js
==== parse ====
{ files: [], references: [ { path: './tsconfig.vi-configdir.json' } ] }
==== parseNative ====
{
  compilerOptions: {
    module: 'es2022',
    moduleResolution: 'bundler',
    noUnusedLocals: true,
    skipLibCheck: true,
    experimentalDecorators: true
  },
  include: [ '/home/projects/github-jbcdpwek/src/*' ]
}

Reproduction

https://stackblitz.com/edit/github-jbcdpwek?file=repro.js

Additional Information

❯ npx envinfo --system --binaries --browsers --npmPackages

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    class-validator: 0.14.1 => 0.14.1 
    tsconfck: ^3.1.4 => 3.1.4 
    typescript: ^5.7.3 => 5.7.3 
    vite: ^6.0.11 => 6.0.11 
    vitest: 3.0.5 => 3.0.5 

[dominikg]

@hi-ogawa possible fix here: #211

Could you share a real-world setup where references use ${configDir} as far as i understand, this feature is geared towards files that are extended.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-5.html#the-configdir-template-variable-for-configuration-files

[dominikg]

@Lukinoh i saw you made an updated reproduction here: https://stackblitz.com/edit/github-jbcdpwek-1nnhrvjc

could you elaborate why you have A references B extends C with A and B being in the same directory?

If C uses ${configDir}, which value should be used in its place? the directory of A or B (if they were different)

[dominikg]

To answer my own question above: when B extends C and C contains ${configDir} that means the directory B is in, even if B itself is referenced from A.

I updated #211 to account for this case.

However i'd like to warn against using such a setup in the wild and suggest you look at the typescript repo where they use layered tsconfig.json files with a single extends so that find-up/parse has less work to do per directory

[hi-ogawa]

Thanks for looking into this 🙏

[Lukinoh]

@hi-ogawa possible fix here: #211

Could you share a real-world setup where references use ${configDir} as far as i understand, this feature is geared towards files that are extended.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-5.html#the-configdir-template-variable-for-configuration-files

I have a mono-repository with several small applications and libraries that have similar configurations and the same structure.

Usually, nowadays, when you bootstrap a project with Vite for instance, it generates 3-4 tsconfig.json.

• tsconfig.json // Have references to app, node, vitest tsconfig.json
• tsconfig.app.json // For the application files
• tsconfig.node.json // For the configuration files
• tsconfig.vitest.json // If you add vitest

So I wanted to leverage the usage of ${configDir} to handle them in one place.

To illustrate a bit my explanation, I created a small dummy repository.

Github
Stackblitz

Thank you for taking the time to look at the issue.

[dominikg]

thank you for the example. While i personally find it too convoluted it can make sense.

The fix has been released in tsconfck@3.1.5. However since vite bundles tsconfck it needs to be updated there too.