TypeScript で TSX の JSX 要素が implicit any になる（TS7026）

要約

JSX element 'div' implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. の TS7026 が出る場合、TypeScript が React の型定義を見つけられていません。
まず @types/react を入れ、tsconfig.json で jsx オプションを react-jsx に設定します。

npm i -D @types/react @types/react-dom

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

よくある原因

1. @types/react 未インストール: React 本体（react パッケージ）と型定義（@types/react）は別パッケージなので、本体だけ入れると JSX.IntrinsicElements が解決できず TS7026 が出る。
2. jsx オプション未設定: tsc --init のままだと jsx は未設定で、type checker が JSX を解釈できない。
3. types を狭めすぎた: tsconfig.json で "types": ["node"] のように明示すると、@types/react が型解決対象から外れる。
4. モノレポの hoist 失敗: pnpm / yarn workspaces で @types/react が深い位置に置かれ、TypeScript が moduleResolution の探索範囲外で拾えない。

解決策

1. 型定義を入れる

npm i -D @types/react @types/react-dom
# pnpm の場合
pnpm add -D @types/react @types/react-dom

2. tsconfig.json で jsx を指定

React 17 以降の新 JSX Transform を使うなら react-jsx（公式 tsconfig リファレンス（新しいタブで開く）↗）。

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "bundler"
  }
}

古い構成で import React from "react" を毎回書きたい場合は "jsx": "react" のままでも動作します（JSX ドキュメント（新しいタブで開く）↗）。

3. types を絞っているなら React 用を追加

{
  "compilerOptions": {
    "types": ["node", "react", "react-dom"]
  }
}

types を未設定にすれば全 @types/* が自動で拾われるので、絞る必要が無いなら削除するのが楽です。

4. モノレポでの hoist

pnpm の .npmrc で public-hoist-pattern[]=*types* を入れる、または各 workspace の devDependencies に @types/react を直接書くと安定します。

実行例

実際に上記の手順を node:20 環境で動かすと、@types/react を入れていない段階で tsc（TypeScript 5.9.3）が終了コード 2 で停止し、TS7026 と TS2874 の 2 種類のエラーが同時に発生することが確認できる。

Version 5.9.3

$ npx tsc
src/App.tsx(1,26): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
src/App.tsx(1,27): error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
src/App.tsx(1,52): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
tsc 終了コード: 2

— 2026-08-02 時点の出力