All Articles

Explained: Cannot use JSX unless the '--jsx' flag is provided

Matt Pocock
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts.

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.

"compilerOptions": {
"jsx": "react"

This option tells TypeScript that you're using JSX - the syntax that many frontend frameworks use to render elements.

Which value should I use for 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.

Matt's signature

Share this article with your friends

`any` Considered Harmful, Except For These Cases

Discover when it's appropriate to use TypeScript's any type despite its risks. Learn about legitimate cases where any is necessary.

Matt Pocock
Matt Pocock

No, TypeScript Types Don't Exist At Runtime

Learn why TypeScript's types don't exist at runtime. Discover how TypeScript compiles down to JavaScript and how it differs from other strongly-typed languages.

Matt Pocock
Matt Pocock

Deriving vs Decoupling: When NOT To Be A TypeScript Wizard

In this book teaser, we discuss deriving vs decoupling your types: when building relationships between your types or segregating them makes sense.

Matt Pocock
Matt Pocock

NoInfer: TypeScript 5.4's New Utility Type

Learn how TypeScript's new utility type, NoInfer, can improve inference behavior by controlling where types are inferred in generic functions.

Matt Pocock
Matt Pocock