できない.dev

TypeScript で TSX の JSX 要素が implicit any になる(TS7026)

JSX element implicitly has type 'any' は @types/react 未インストール、または tsconfig.json の jsx オプション未設定が原因。
React なら @types/react を追加し jsx を react-jsx に指定する。

公開: 更新:

実行例あり(2026-08-02 に実環境で検証)

要約

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"
  }
}

実行例

実際に上記の手順を 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 時点の出力

検証環境

検証日
実行環境
node:20

この記事の「実行例」は、上記の環境で実際にコマンドを実行して得られた出力をそのまま掲載しています。 再現手順はリポジトリの検証スクリプトとして管理し、定期的に再実行して出力を更新しています。

よくある原因

  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"]
  }
}

TypeScript 5.9 までは types を未設定にすれば全 @types/* が自動で拾われるので、絞る必要が無いなら削除するのが楽です。
TypeScript 6.0 からは未設定時の既定値が [] になったため、削除しても @types/* は自動では入らず、必要なものを列挙するか "types": ["*"] で従来どおり全部を読み込ませます(TypeScript 6.0 リリースノート(新しいタブで開く))。

4. モノレポでの hoist

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

この記事は役立ちましたか?