feat(create-vite): use "solution" tsconfig so that vite.config.ts is type checked

[philbates35]

Description

Currently when running pnpm run build on a fresh Vite project using any of these templates, tsc doesn't fail when there are type errors in vite.config.ts, such as something obvious like:

const foo: string = 123;

Passing -b makes it run for all project references, meaning that vite.config.ts starts to be type checked too during build.

In order to not generate a vite.config.js and vite.config.d.ts we need to make the main tsconfig.json have nothing but references to tsconfig.node.json and a new tsconfig.app.json, as is done in the create-vue project, see:
https://github.com/vuejs/create-vue/blob/f75fd9813a624b8e44b012608335721901aba00b/template/tsconfig/base/tsconfig.json

Note: I am unfamiliar with Svelte which is the only template that I wasn't sure how to apply this to, its script looks like this:

"check": "svelte-check --tsconfig ./tsconfig.json"

I checked the docs of the svelte-check project but I couldn't see anyway to pass options through to tsc, if you know of a way to do that then let me know and I'll update the PR.

close #12590
close #11396

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[sapphi-red]

One thing we might need to consider is that this might make more users to encounter #15870.

[patak-dev]

Let's wait for a tsconfck update before merging this one.

[philbates35]

@patak-dev sounds good - just out of interest, which update are we waiting for and what's the reason?

[patak-dev]

I think we can now move forward with this one. @dominikg I'll let it open a few more days in case you'd like to check it out too.

[dominikg]

why is this turning on composite and storing a file in node_modules/.tmp ? This feels opinionated

cc @dummdidumm regarding svelte-check, iirc it does check all files, not just .svelte. It should not be needed to chain tsc after it in svelte templates

[dominikg]

in general I'd like to challenge the use of solution style tsconfig in create-vite. My understanding is that these are minimalist setups.

Is there a way to make this work that does not require additional files?

[sapphi-red]

why is this turning on composite

It is to run type check on vite.config.ts too. Another way to do this is to call tsc && tsc -p tsconfig.node.json instead of tsc -b.

storing a file in node_modules/.tmp

AFAIK when using project references, TypeScript outputs tsbuildinfo files and defaults to the same directory with tsconfig.json. There's no way to disable the output.

Is there a way to make this work that does not require additional files?

We can merge tsconfig.app.json and tsconfig.node.json, but that allows node-related types to be used in source files and browser-related types to be used in config files (e.g. process.env in src/index.ts, document.querySelector in vite.config.ts).

[dummdidumm]

@dominikg chaining looks fine, assuming the vite config does not import any Svelte code. It's fine because the tsconfigs have separate includes, so svelte-check doesn't check the vite config, which is what the tsc command then does.

[dominikg]

AFAIK when using project references, TypeScript outputs tsbuildinfo files and defaults to the same directory with tsconfig.json. There's no way to disable the output.

you can use references without turning on composite (composite makes incremental true by default https://www.typescriptlang.org/tsconfig#incremental , which generates these files)

calling it tsconfig.node.json is also slightly controversial for users that use other environments such as deno or bun.

If you have to add a second config file, i'd use a more neutral name and not use composite. Maybe not even use references but instead add a separate script that just typechecks vite.config.ts with a tsconfig.viteconfig.json.

[dominikg]

to expand on the separate command part, build may not be the right command to typecheck the vite config. The vite configs included in create-vite don't have errors, if and how these are checked as part of build should be decided by the user.

[dominikg]

enabling composite/incremental can also slow down CI build times and it's not clear if the node_modules directory always exists as a sibling of the tsconfig file. I think this needs to be actively done by the user instead of being default in create-vite.

[sapphi-red]

you can use references without turning on composite (composite makes incremental true by default https://www.typescriptlang.org/tsconfig#incremental , which generates these files)

enabling composite/incremental can also slow down CI build times and it's not clear if the node_modules directory always exists as a sibling of the tsconfig file. I think this needs to be actively done by the user instead of being default in create-vite.

I didn't know about that. Then, I think we should remove composite and tsBuildInfoFile if we'd go this way.

calling it tsconfig.node.json is also slightly controversial for users that use other environments such as deno or bun.

tsconfig.node.json was there for more than two years. So I want to split that discussion in a different PR.

---

Maybe removing tsconfig.node.json and adding vite.config.ts to include of tsconfig.json is better? 🤔 It doesn't have much benefit of having it in the current state (#11396 (comment)).

[bluwy]

Let's give this a try. I'm also concern that this makes a simple Vite project complicated with having 3 tsconfigs ootb, but we can gauge the perception of this later, and if many others feel the same way, we can simplify as a single tsconfig and document how to typecheck the vite config separately.

[fz6m]

IMO, making things complex. this shouldn't be included in a basic template.

[rschristian]

Thought it worth mentioning that this does seem to cause errors out-of-the-box in every JSX lib on StackBlitz -- it can't seem to utilize the "references" field, so there's errors as TS can't find a "jsx" config anywhere.

I imagine this is something StackBlitz has to figure out rather than an issue here, but with StackBlitz being a recommended option for reproductions... something worth considering for the moment, anyways.

[kasperpeulen]

This also gives issues in Storybook, as composite sets declaration to true and this can not be turned off.

In storybook, *.stories.ts files are usually not written in a way that allows .d.ts files to be generated from them.

In a fresh storybook vite react project, users now get the following TS error:

Exported variable 'meta' has or is using name 'ButtonProps' from external module "src/stories/Button" but cannot be named.
ts(4023)

[patak-dev]

There is a fix for StackBlitz that should be deployed soon, so that won't be an issue for people using this scheme. But we are getting other issues as the one that @kasperpeulen has brought up, so I think we should review this change. Would you open an issue so we can better track this @kasperpeulen?

[kasperpeulen]

@patak-dev here is the issue:
#17638