TypeScript「Cannot use JSX unless the '--jsx' flag is provided」の原因と直し方

要約

このエラー（TS17004）は、JSX を含むコードを jsx コンパイラオプション無しでコンパイルしようとしたときに出る。tsconfig.json の compilerOptions.jsx に react-jsx などを設定し、ファイル拡張子を .tsx にすれば解決する。

実行例

TypeScript 5.9.3 で jsx を指定していない tsconfig のまま npx tsc を通すと TS17004 が出て終了コードは 2 になり、フラグを足すと同じコマンドが 0 で通る。
同じファイルを .ts に改名して試すと、今度は JSX が正規表現として読まれて TS1161 になり、拡張子のほうも条件であることが分かる。

Version 5.9.3

$ npx tsc
src/Button.tsx(2,10): error TS17004: Cannot use JSX unless the '--jsx' flag is provided.
$ echo $?
2

$ npx tsc
$ echo $?
0

$ mv src/Button.tsx src/Button.ts

$ npx tsc
src/Button.ts(2,21): error TS1161: Unterminated regular expression literal.
$ echo $?
2

— 2026-10-25 時点の出力

解決策

1. tsconfig に jsx を設定する

React 17 以降の自動ランタイムなら react-jsx を指定する。

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

Babel など別のツールで JSX を変換する構成なら preserve を選ぶ。
各値の違いは公式の TSConfig jsx オプション（新しいタブで開く）↗に一覧がある。

2. 拡張子を .tsx にする

Button.ts  ->  Button.tsx

3. エディタの TypeScript を再読み込みする

VS Code ならコマンドパレットで「TypeScript: Restart TS Server」を実行し、設定を読み直す。

よくある原因

1. jsx オプション未設定: tsconfig.json に jsx が無いと、TypeScript は JSX の変換方法を決められずエラーになる。
2. 拡張子が .ts: JSX を書くファイルは .tsx にする必要がある。.ts のままだと山括弧が型アサーションと解釈される。
3. エディタとの不一致: VS Code が使う TypeScript とプロジェクトの tsconfig.json がずれていると、設定を直しても警告が残ることがある。