How to add typescript to an existing vite react app?

[arunabhg]

Hi,
I used the react template to create a react app using Vite. Midway into the project, it seemed a good idea to incorporate TypeScript. How can I add TypeScript to an existing react app created using Vite? I've added TypeScript earlier to a CRA project, but the following script didn't work in this case-
yarn add typescript @types/node @types/react @types/react-dom @types/jest

I would really appreciate some solution as I couldn't find any link regarding this in the docs. Thanks!

[emrergin]

Hello, did you find a solution to this?

[arunabhg]

No, I didn't. I had to restart from scratch if using vite. I would suggest using CRA as an alternative.

[tony19]

I would just scaffold a new Vite project using the react-ts template. Then copy the configs and package.json from the new project to the old.

[arunabhg]

I implied the same when I said restarting from scratch. We use the react-ts template to create a new project and copy the config files, package.json. Then integrate the code files one by one into the new project. It's almost like starting from scratch.

[anasouardini]

!. install typescript, @types/react and @types/react-dom.
2. in packages.json, replace vite build with tsc && vite build.
3. configure your TS:

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "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",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

pretty easy to do. I wonder why no one made a response like this.
I only know this because I installed a new vite project then copied the config files to the typeless old project. but you don't have to (hopefully not soon)/

HAPPY CODING :)

[arunabhg]

Thanks for listing down the detailed steps, @JuanQP.
I had carried out some of the steps earlier, like installing typescript, renaming config.js to config.ts, and changing the file name in index.html. But it didn't work.
Step 4 was the missing piece required for types in the vite client.
Appreciate your help in getting to the answer.

[julianmagra]

I have a question! In my specific case i did all steps correctly, im sure. But my index.html file gets an error:

what i need to do to fix this?

[julianmagra]

If more information about the problem is needed tell me

[arunabhg]

The error is in your main.tsx file, @julianmagra. The TypeScript compiler infers that an element may be an HTMLElement or null. Taking a cue from the solution posted by @TonyGravagno, we have to add the correct typings for the element:
Modify the default From :
ReactDOM.createRoot(document.getElementById('root')).render(
To :
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
This should solve the error.

[julianmagra]

Thank you so much! You are the best. It worked

[JuanQP]

This is a summary of my previous response, and the response of @segfaulty1, in order to have everything in one single place.

Step 1/6
Install dev dependencies

npm install -D typescript @types/react @types/react-dom

Step 2/6
In packages.json, replace:

"build": "vite build"

With 👇

"build": "tsc && vite build"

Step 3/6

Rename vite.config.js and main.jsx to vite.config.ts and main.tsx

Step 4/6
Configure TypeScript by creating these two files in the root of your project:

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "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",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

Step 5/6

Create a file named vite-env.d.ts inside the src/ folder and copy and paste this (with the three slashes at the beginning):

/// <reference types="vite/client" />

Step 6/6

In your index.html you should change the name of your script from the old main.jsx to main.tsx like this:

<script type="module" src="/src/main.tsx"></script>

That's it. Happy coding 🙂

[gatinhap]

Great guide, thanks, it went pretty smoothly :)

[strudelPie]

Works perfectly, cheers!

[BenGardiner123]

Can't stress enough how much I appreciate people like you taking the time to output things this way.

Thank you

[Ted-AfroEm]

Great Thanks you

[singhpradip]

wow great, it works perfectly. Thankyou so much for sharing

[slav-getov]

I am using npm run dev in vite. Do I have to change something in scripts and do I have to first build before I run dev?

[murtuzaalisurti]

nope, no change in dev script

[slav-getov]

Thank you, I didn't build again and everything started out fine. Thanks for the guide as well.

[DevPowers]

Did you also rename main.jsx file to a .tsx file? I renamed it and am getting exceptions for many of my imports there:

TS7016: Could not find a declaration file for module

Also what changes did you have to make for eslint ?? And the above steps will allow javascript as well so I can transition slowly to TS? Or do I need to convert everything in the project to tsx for this to work

[DevPowers]

Update: Changing the following in tsconfig.json got rid of the exceptions and it was able to run.
"noImplicitAny": false,
"noImplicitThis": false,

For eslint setup I found this guide helpful: https://cathalmacdonnacha.com/setting-up-eslint-prettier-in-vitejs

And I did have to rename the main.jsx -> main.tsx, and the project does work without me converting everything to TS! <3 Thanks for starting this thread in StackOverflow OP

[JuanQP]

I've added that part of renaming main.jsx -> main.tsx.

Obviously once you do all of this, your entire project will be red as blood because of so many noImplicitAny errors. That's expected. But that has nothing to do with adding typescript to an existing vite react app. That's just how TypeScript works and it's ok to see those errors because it will be time to fix all the type errors.

Edit: I didn't even know that someone posted a link with that previous answer on StackOverflow 😆 . I'll try to keep it updated

[DevPowers]

I'm seeing one bug pop up where my environment variables are no longer being loaded since converting to TS and only in production builds. I was using env-cmd which allowed me to control which env file was loaded, but that is now broken :[. Any ideas on how to fix that? I have 4 environments I like to use aws/dev, aws/prod, local/dev, local/prod. The problem is both AWS deploys need to be using the 'production' build which makes things tricky.

"scripts": {
"build:prod": "env-cmd -f environments/aws/.env.prod tsc --noEmit && vite build --mode production"
}

[TonyGravagno]

Just needed this today and found this ticket. I am providing some additional notes. While this all helped to get me going, YMMV, don't make random changes, plan to revert if required.

1. Change App.jsx to App.tsx
2. Modify Main.tsx to import App from './App.tsx'
3. You can manually create tsconfig.json, or from Terminal you can npx tsx --init. This creates a full tsconfig.json, and from here you can edit the params noted above. Some of the defaults are already set, some not.
4. If you want to use tsc from Terminal, and plain ol 'tsc' returns an error, use .\node_modules\.bin\tsc.
   4a. Similarly, if build fails, in package.json, try modifying the scripts>build node as follows:
   "build": ".\\node_modules\\.bin\\tsc && vite build",
5. In package.json, add/replace the scripts>lint node as follows:
   "lint": "eslint src --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
   If you have a lint line, note the added --extensions, ts,tsx.
   To verify linting from Terminal: npm run lint.
   I was going to cover implementation of @typescript-eslint/*, but configs can get finicky. If you're linter is not actually processing the TS, this might be why.
6. In main.tsx the build may fail with the following error:

error TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment'.

Modify the default From :
ReactDOM.createRoot(document.getElementById('root')).render(
To :
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

HTH

[henriquesouzadev]

When i run the build, the build folder is not created. The compiled files are going to inside the folder "src"

[jfvillablanca]

You have to set the "outDir" in your tsconfig.json
https://www.typescriptlang.org/tsconfig#outDir