ProjectStack

typescript

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

You're writing JSX syntax in a TypeScript file but the TypeScript compiler isn't configured to handle it. You need to set the jsx option in tsconfig.json to tell TypeScript how to transform JSX elements.

Common causes

The jsx option is missing from tsconfig.json compilerOptions
Using JSX in a .ts file instead of a .tsx file
The project was set up without JSX configuration and JSX was added later
The tsconfig is configured for a non-browser context without JSX support

How to fix it

Add jsx to tsconfig.json: { "compilerOptions": { "jsx": "react-jsx" } } for React 17+
Use react instead of react-jsx if you're on React 16 and import React manually in each file
Rename .ts files containing JSX to .tsx
For Next.js or Vite projects, use their provided tsconfig templates which already have jsx set

Example

// src/App.ts
const element = <div>Hello</div>;
// error TS17004: Cannot use JSX unless the '--jsx' flag is provided.

Writing JSX in a .ts file without the jsx compiler option set in tsconfig.json

Browse more errors

The Developer Hub covers 150+ errors across Git, npm, Node.js, Python, TypeScript, and Docker — with plain-English explanations and fix steps.