document - or detect and enable buildMode automatically

[PLkolek]

Describe the bug

After bootstrapping a Vite react-ts project and following vite-plugin-checker's "Getting Started" to set up Typescript checker, the checker seems to execute Typescript, but for some reason it doesn't detect any errors. I.e. running npm run build fails due to type errors, but npm run dev outputs [TypeScript] Found 0 errors. Watching for file changes.

I using WSL on Windows - maybe this is what matters?

Reproduction

1. npm create vite@latest my-react-app -- --template react-ts
2. cd my-react-app
3. npm i vite-plugin-checker -D
4. Import and use checker in vite.config.ts with typescript: true
5. Introduce type error in src/App.tsx
6. npm run dev

Expected behavior

Expected result: same error as when executing npm run build.

src/App.tsx:21:41 - error TS2345: Argument of type '(count: number) => string' is not assignable to parameter of type 'SetStateAction<number>'.
  Type '(count: number) => string' is not assignable to type '(prevState: number) => number'.
    Type 'string' is not assignable to type 'number'.

21         <button onClick={() => setCount((count) => "123")}>

Actual result: no errors detected.

  VITE v5.4.0  ready in 435 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

[TypeScript] Found 0 errors. Watching for file changes.

System Info

System:
    OS: Linux 5.10 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 5.04 GB / 7.69 GB
    Container: Yes
    Shell: 5.0.16 - /bin/bash
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm
  npmPackages:
    vite-plugin-checker: ^0.7.2 => 0.7.2

Additional context

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[PLkolek]

Ah I see now. The project generated by npm create vite@latest my-react-app -- --template react-ts uses references, and AFAIU this requires buildMode: true. As I haven't worked with TS for a longer while I missed the whole references thing, and did not know what --build flag means ("why would I need to build anything if I am just running a checker?!"). Maybe the docs could be more explicit when this flag is needed, or that some Vite templates need this "advanced" option?

[bungdanar]

Ah I see now. The project generated by npm create vite@latest my-react-app -- --template react-ts uses references, and AFAIU this requires buildMode: true. As I haven't worked with TS for a longer while I missed the whole references thing, and did not know what --build flag means ("why would I need to build anything if I am just running a checker?!"). Maybe the docs could be more explicit when this flag is needed, or that some Vite templates need this "advanced" option?

I am still confused, I also use react-ts template, where should I set the buildMode: true or add the --build flag? The vite-plugin-checker doesn't have buildMode option but enableBuild. I have already set enableBuild: true but it still show 0 errors when in the development mode.

[mice33]

Ah I see now. The project generated by npm create vite@latest my-react-app -- --template react-ts uses references, and AFAIU this requires buildMode: true. As I haven't worked with TS for a longer while I missed the whole references thing, and did not know what --build flag means ("why would I need to build anything if I am just running a checker?!"). Maybe the docs could be more explicit when this flag is needed, or that some Vite templates need this "advanced" option?

I am still confused, I also use react-ts template, where should I set the buildMode: true or add the --build flag? The vite-plugin-checker doesn't have buildMode option but enableBuild. I have already set enableBuild: true but it still show 0 errors when in the development mode.

vite-plugin-checker/docs/checkers/typescript.md

Line 25 in b2c3236

| buildMode | `boolean` | `false` | Add [`--build`](https://www.typescriptlang.org/docs/handbook/project-references.html) to `tsc` flag, note that `noEmit` does NOT work if `buildMode` is `true` ([#36917](https://github.com/microsoft/TypeScript/issues/36917)) |

After adding buildMode: true, I fixed the issue.

[terrance456]

Solution:

vite.config.ts file

 plugins: [
    checker({
      typescript: { buildMode: true },
    }),
  ]

[crcass]

If you're starting a new Vite project, the default tsconfig.json doesn't seem to work. Updating the config to point to tsconfig.app.json seems to fix the problem for me.

export default defineConfig({
  plugins: [
    react(),
    checker({ 
      typescript: {
        tsconfigPath: './tsconfig.app.json'
      },
     })
  ],
})

[deividkamui]

This sucks ass hard, I spend like 3 days trying to figure this out. In the oficial documentation there is no guide that you need to do this.

[fidaay]

If you're starting a new Vite project, the default tsconfig.json doesn't seem to work. Updating the config to point to tsconfig.app.json seems to fix the problem for me.

export default defineConfig({
plugins: [
react(),
checker({
typescript: {
tsconfigPath: './tsconfig.app.json'
},
})
],
})

This is the solution 👍. Otherwise, vite-plugin-checker won't find the TypeScript configuration.

[tryforceful]

It seems that this plugin doesn't yet support tsconfigs that use references. I had to make the same change as the previous comment

[eevloeev]

The same problem. The plugin does not see tsconfig files, which are included as references into main tsconfig.

Since I have a Vue project and we use vueTsc in addition to tsc, I found a temporary workaround in the form of enable both. For vueTsc, I specified the config for the frontend application (tsconfig.app.json), and for tsc, I specified the config for the server application (tsconfig.node.json).

defineConfig({
  plugins: [
    vue(),
    checker({
      typescript: {
        tsconfigPath: path.resolve(__dirname, 'tsconfig.node.json'),
      },
      vueTsc: {
        tsconfigPath: path.resolve(__dirname, 'tsconfig.app.json'),
      },
    }),
  ],
})

I know it's not perfect, but unfortunately, only this method prints all the errors I need, without generating output or *.d.ts artifacts.

If you are satisfied with output or *.d.ts artifact generation, you can simply pass buildMode: true.