76

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:

tsconfig.json

{
    "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" }]
}

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?

rodrigocfd
  • 6,450
  • 6
  • 34
  • 68

2 Answers2

60

You need two different TS configs because the project is using two different environments in which the TypeScript code is executed:

  1. Your app (src folder) is targeting (will be running) inside the browser
  2. Vite itself including its config is running on your computer inside Node, which is totally different environment (compared with browser) with different API's and constraints

Thus there are two separate configs for those environments and two sets of source files that are defined by the include and exclude sections of these configs. Then there is one "master" config tsconfig.json which "rules them all"

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 its purpose more clear. If you do, make sure to update "main" config accordingly

Michal Levý
  • 33,064
  • 4
  • 68
  • 86
  • 1
    if we rename the `tsconfig.node.json` to `tsconfig.vite.json`, do we have to make any changes in the build script in package.json too? Otherwise how does vite recognise the renamed file? – Haris Jun 25 '22 at 12:10
  • 13
    @Haris TS compiler loads all the configs (at least in my current Vite setup there is one main `tsconfig.json` which references all other configs) and applies them to a files based on the `exclude` and `include` masks inside them... – Michal Levý Jun 25 '22 at 14:10
5

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.

timbhison
  • 101
  • 7