[Vite] add a target for type checking

[vicb]

• I'd be willing to implement this feature (contributing guide)

Description

It would be great to have a typecheck target when vite is used to check the types.

Probably build:production should depend on this target.

Motivation

If you create a vite app and set the content of main.ts to:

function error(param: number) {
    console.log(param);
}

error("abc");

export {};

(Notice "abc" vs the expected number type.)

The build target will happily compiles this code.

While it's great to skip type check in to have a better (=faster) dev experience there should be a way to check the types and it would be nice to do it when building the production configuration.

Suggested Implementation

Use tsc --noEmit to check types.

[mandarini]

Hi there @vicb ! Thanks for creating this feature request. I see you are happy to implement this feature. Do you want to give this a shot, and assign the PR to me for review? I can help you if you need!

[vicb]

I could try to take a look at that but I will certainly need help.

As I'm getting more familiar with Nx I think the steps would be:

1. Add a typecheck executor in the JS package,
2. Generate a typecheck target using this executor from in the vite:configuration generator.

Would that be a good start?

[mandarini]

How would you do this typechecking outside of Nx context, if you had a pure React+Vitejs app? I mean, if it's a script you set up, maybe there's no need to create a new executor. Maybe you can just create a new target that calls run-commands. But I am not sure how this would be set up.

[vicb]

How would you do this typechecking outside of Nx context, if you had a pure React+Vitejs app?

Using tsc --noEmit

Maybe there's no need to create a new executor

Creating an executor could be helpful whenever babel or swc are used to compile the code as those wouldn't do any type checking.

An other option that I just found out would be to use vite-plugin-checker. It is less generic as it would only apply to vite projects but it might be simpler?

WDYT?

[mandarini]

Yes, I think the vite-plugin-checker seems like a better option in this case.

[vicb]

vite-plugin-checker after updating the plugins config as:

// vite.config.ts
import { checker } from 'vite-plugin-checker';

// ...

  plugins: [
    checker({
      typescript: {
        root: `${process.cwd()}/path/to/app`,
        tsconfigPath: 'tsconfig.app.json',
      },
    }),
    viteTsConfigPaths({
      root: '../../',
    }),
  ],

requires

npm i -D vite-plugin-checker

edit: added root for the build target to work as well

[mandarini]

A typecheck target could look like:

    "vite-typecheck": {
      "executor": "nx:run-commands",
      "options": {
        "command": "tsc --noEmit -p <project-root>/tsconfig.app.json"
      }
    }

and maybe in that case you would not need that plugin? Or maybe I'm missing something.

You can check out this PR which does something along these lines.

[vicb]

Hey @mandarini do you want me to work on a PR along the lines of your last message?
My understanding from your previous comment was that we should use the vite plugin instead?

[mandarini]

Hello @vicb ! Yes, sure, work on that PR! :) Thank you very much!!!

[vicb]

We can probably use https://github.com/nrwl/nx/blob/master/packages/js/src/utils/typescript/run-type-check.ts

I'll take a look at that next

[jonybekov]

Any news regarding this https://github.com/nrwl/nx/blob/master/packages/js/src/utils/typescript/run-type-check.ts?

[Lonli-Lokli]

According to the documentation https://nx.dev/nx-api/vite/executors/build#skiptypecheck it should just work. It has been added https://github.com/nrwl/nx/releases/tag/16.4.0-beta.3

[mandarini]

I am closing this issue because indeed it should work, and we are shifting things around with targets, too, at the moment.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.