How do you fix JSX and type-only import errors under `verbatimModuleSyntax`?

Q: How do you fix JSX and type-only import errors under `verbatimModuleSyntax`?

**Target Audience:** React and frontend developers whose build broke after turning on `verbatimModuleSyntax`, and anyone asked how to migrate a codebase to it. **Difficulty:** Medium **TypeScript version:** All errors, emitted files and quick fixes below came from TypeScript 5.4.5 on a scratch project with `jsx: "react-jsx"`, `module: "ESNext"`, `moduleResolution: "Bundler"` and `verbatimModuleSyntax: true`. To keep the run self-contained it used a small hand-written stand-in for the `react` type declarations (only `FC`, `useState` and the JSX namespace), not the real `@types/react`. > **How to read this doc:** Every idea is explained in plain language first, then tagged with `📌 Interview term:` so you also learn the exact words an interviewer expects. The `error TS....` lines and emitted JavaScript are copied from real `tsc` runs, and the **Verified** section quotes the example program's output in full. This page is the applied, React-shaped half of the topic. What the flag is and

The problem

Question presented to candidate: "We enabled verbatimModuleSyntax in our React app and now App.tsx and our component barrel files fail to compile. Walk me through the errors you expect, how you fix each one, and how you would fix a few hundred files without doing it by hand."

What a strong answer should cover:

Props types, FC, ReactNode and other types need import type or an inline type modifier (TS1484); components used in JSX are values and must stay plain imports
Barrel files that re-export props types need export type { ... } (TS1205)
Over-fixing breaks too: a component imported with import type and used in JSX is TS1361, and import type React, { useState } is TS1363
The JSX runtime matters: with jsx: "react-jsx" the compiler adds import { jsx as _jsx } from "react/jsx-runtime" and an old import React becomes an unused import that is still emitted; with classic jsx: "react", React must be a value import
Files that emit CommonJS fail with TS1286; the fix is ESM output, not more type keywords
Bulk fixes: the TypeScript quick fix "Fix all with type-only imports", typescript-eslint consistent-type-imports with --fix, and type-only auto-imports in the editor

Clarifying questions expected:

Which JSX setting does the project use (react-jsx or classic react)?
Does the build emit ESM or CommonJS (module setting and package.json "type")?

Code / implementation expected: Yes — a broken component file and its fixed version, plus a barrel file fix.

verbatimModuleSyntax
jsx

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: React and frontend developers whose build broke after turning on verbatimModuleSyntax, and anyone asked how to migrate a codebase to it. Difficulty: Medium TypeScript version: All errors, emitted files and quick fixes below came from TypeScript 5.4.5 on a scratch project with jsx: "react-jsx", module: "ESNext", moduleResolution: "Bundler" and verbatimModuleSyntax: true. To keep the run self-contained it used a small hand-written stand-in for the react type declarations (only FC, useState and the JSX namespace), not the real @types/react.

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer expects. The error TS.... lines and emitted JavaScript are copied from real tsc runs, and the Verified section quotes the example progra

The solution is hidden so you can try first

11 min read · 12 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.