I'm using Vite to create a new React + TypeScript project.
After creating the project, there are two TypeScript config files on the root folder: tsconfig.json and tsconfig.node.json. These are the contents of each one:
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": false,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["vite.config.ts"]
}
Why do we need two?
What does the second one do?
Can I remove the second one?
You need two different TS configs because the project is using two different environments in which the TypeScript code is executed:
src folder) is targeting (will be running) inside the browserSo there are two different configs for those two environments and two distinct sets of source files...
And no, you probably don't want to delete the tsconfig.node.json but you can probably rename it to something like tsconfig.vite.json to make it's purpose more clear
As mentioned by Michal Levý, these are different configs for different environments.
You will notice that tsconfig.json includes a "references" key which points to an array that includes the tsconfig.node.json file. If you wish to change the filename of your vite tsconfig, be sure to update this reference.