Add TypeScript To An Existing React Project
Learn how to add TypeScript to your existing React project in a few simple steps.
Cannot use JSX unless the '--jsx' flag is provided.
This error is likely happening because you haven't specified jsx
in the compilerOptions
of your tsconfig.json
.
json
{"compilerOptions": {"jsx": "react"}}
This option tells TypeScript that you're using JSX - the syntax that many frontend frameworks use to render elements.
jsx
?There are several possible values you might need to consider for jsx
. You can refer to my article solving the 'React refers to a UMD global' error for more information.
The most likely values to work are:
preserve
: preserves the JSX as it is and doesn't add any extra transformations.react-jsx
: uses a modern transform (_jsx
) that works with React 17 and above.react
: uses a legacy transform (React.createElement
) that works with React 16 and below.Try those in order, and see which one works for you.
And if you want to learn React and TypeScript more fully, check out my free React and TypeScript beginner's course. There are 21 interactive exercises packed with TypeScript tips and tricks for React apps.
Share this article with your friends
Learn how to add TypeScript to your existing React project in a few simple steps.
Learn the essential TypeScript configuration options and create a concise tsconfig.json file for your projects with this helpful cheatsheet.
Big projects like Svelte and Drizzle are not abandoning TypeScript, despite some recent claims.
Learn different ways to pass a component as a prop in React: passing JSX, using React.ComponentType, and using React.ElementType.
Learn about TypeScript performance and how it affects code type-checking speed, autocomplete, and build times in your editor.
When typing React props in a TypeScript app, using interfaces is recommended, especially when dealing with complex intersections of props.