JSX element implicitly has type 'any' の原因と直し方（TypeScript）

error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.（--locale ja を付けると error TS7026: インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。）は、<div> のようなタグの型を調べる表（JSX.IntrinsicElements）を、TypeScript が見つけられないときの文です。React では、この表は React の型の定義（@types/react）が持っています。

手元でこの文が出たのは、次の 3 つのときです。一緒に出たエラーで見分けます。

tsconfig.json に jsx が無いとき: TS17004 も一緒に出ます
@types/react が入っていないとき: TS7016 も一緒に出ます
"jsx": "preserve" にして types を書いていないとき: TS7026 だけが出ます

直し方は、npm install --save-dev @types/react @types/react-dom で型の定義を入れ、tsconfig.json の compilerOptions に "jsx": "react-jsx" を書くことです。preserve のままにするなら、"types": ["react"] を足します。"strict": false にすると消えますが（@types/react が無いときに試しました）、直ったのではなく、調べるのを止めただけです。

確かめた環境は、TypeScript 7.0.2 と 6.0.3（エラーの文は同じ）・@types/react 19.3.0・react 19.3.1・Node.js 24.22.1 です。Docker の Linux で、2026年10月23日に流しました。Windows と macOS では流していません。出力のパスの頭は … に省きました。

この記事でわかること

TS7026 のエラーの全文（英語と --locale ja の日本語）と、JSX.IntrinsicElements が何かという意味
手元で出た 3 つの場合（jsx が無い・@types/react が無い・preserve で types が無い）の見分け方
@types/react を入れることと、jsx の値を書くことの直し方
"strict": false で消えても、直ったことにならない理由

TS7026 はどんなエラー？
1. エラーの全文（英語と --locale ja）
2. JSX.IntrinsicElements とは
なぜ出る？手元で出た場合ごとに見る
どう直す？
1. "strict": false で消えるのは、直したのではない
よくある質問
まとめ
参考資料

TS7026 はどんなエラー？

JSX は、<h1>Hello</h1> のように、JavaScript の中にタグを書く書き方です。TypeScript は、そのタグの型を調べるときに、型の表を使います。表が見つからないと、TS7026 を出します（strict のとき。手元の結果です）。

エラーの全文（英語と --locale ja）

次の Hello.tsx を、"jsx": "preserve" で types の無い tsconfig.json のフォルダー（e-preserve）で調べたときの出力です。

export function Hello() {
  return <h1>Hello</h1>;
}

$ npx tsc --noEmit -p e-preserve
e-preserve/src/Hello.tsx(2,10): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
e-preserve/src/Hello.tsx(2,19): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
$ npx tsc --noEmit -p e-preserve --locale ja
e-preserve/src/Hello.tsx(2,10): error TS7026: インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。
e-preserve/src/Hello.tsx(2,19): error TS7026: インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。

日本語の文は、--locale ja を付けたときの TypeScript の文です。TypeScript 7.0.2 と 6.0.3 で、文は同じでした。終了コードは違い、7.0.2 は 1、6.0.3 は 2 でした。

JSX.IntrinsicElements とは

TypeScript の Handbook は、div などの組み込みの要素（intrinsic elements）は、特別なインターフェイス JSX.IntrinsicElements で調べる、と書いています。このインターフェイスが無いと、何でも通り、型チェックはされません。React で JSX を使うなら、React の型の定義（typings）を使います。その定義が、JSX の名前空間を React 用に決めます。

noImplicitAny は、型を推論できずに any にするところで、エラーを出す設定です。既定は、strict が true なら true です。手元では、"strict": false にすると TS7026 が出なくなりました（下の節）。ただし、TS7026 が noImplicitAny のエラーだと書いた公式の文は、見つけていません。

なぜ出る？手元で出た場合ごとに見る

tsconfig.json に jsx が無い（TS17004 も出る）

.tsx に <h1> を書いて、tsconfig.json に jsx が無いと、TS7026 と TS17004 が同じ行に出ました。

$ npx tsc --noEmit -p d-nojsx
d-nojsx/src/Hello.tsx(2,10): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
d-nojsx/src/Hello.tsx(2,10): error TS17004: Cannot use JSX unless the '--jsx' flag is provided.
d-nojsx/src/Hello.tsx(2,19): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

TS17004 の直し方は、Cannot use JSX unless the '--jsx' flag is provided の記事に書きました。

@types/react が入っていない（TS7016 も出る）

react だけを入れて、@types/react を入れていない TypeScript 7.0.2 のフォルダーです。"jsx": "react-jsx" を書いていても、TS7026 と TS7016 が出ました。

$ npm ls --depth=0
nt7.0.2@1.0.0 …/nt7.0.2
+-- react@19.3.1
`-- typescript@7.0.2
$ npx tsc --noEmit -p a-tsx
a-tsx/src/Hello.tsx(2,10): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
a-tsx/src/Hello.tsx(2,10): error TS7016: Could not find a declaration file for module 'react/jsx-runtime'. '…/node_modules/react/jsx-runtime.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react/jsx-runtime';`
a-tsx/src/Hello.tsx(2,19): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

TS7016 の文は、npm i --save-dev @types/react を試すよう勧めています。--locale ja では、次の文になります。

$ npx tsc --noEmit -p a-tsx --locale ja
a-tsx/src/Hello.tsx(2,10): error TS7026: インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。
a-tsx/src/Hello.tsx(2,10): error TS7016: モジュール 'react/jsx-runtime' の宣言ファイルが見つかりませんでした。'…/node_modules/react/jsx-runtime.js' は暗黙的に 'any' 型になります。
  存在する場合は `npm i --save-dev @types/react` を試すか、`declare module 'react/jsx-runtime';` を含む新しい宣言 (.d.ts) ファイルを追加します
a-tsx/src/Hello.tsx(2,19): error TS7026: インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。

"jsx": "preserve" で types を書いていない

@types/react が入っていても、"jsx": "preserve" にして types を書かないと、TS7026 が出ました。この実験の Hello.tsx は、React を import していません。出力は、上の「エラーの全文」と同じです。"types": ["react"] を足すと、エラーなしで通りました。

$ npx tsc --noEmit -p e-preserve-types

TypeScript 6.0 から、types の既定は空（[]）です。それまでは、node_modules/@types の中を全部入れていました。types を書くと、書いたものだけがグローバルに入ります。この変更と並べて書いていますが、これが TS7026 の原因だと言い切った公式の文は、見ていません。"jsx": "react-jsx" のときは、@types/react が入っていれば、types を書かなくても通りました。

どう直す？

手元で出た場合に合わせて、次の順で直します。

① @types/react と @types/react-dom を入れます。React の文書が案内しているコマンドです。

npm install --save-dev @types/react @types/react-dom

② tsconfig.json の compilerOptions に jsx を書きます。すでに compilerOptions があるときは、その中に 1 行足します。Vite のひな形なら、tsconfig.app.json を見ます。

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

③ preserve を使うなら、"types": ["react"] も足します。手元で通った形は、次のとおりです。

{ "compilerOptions": { "jsx": "preserve", "types": ["react"] } }

Vite の react-ts のひな形は、1 と 2 が最初から入っています（→ Vite と React の記事）。jsx の値の意味は、tsconfig の記事にまとめました。JSX を書くファイルは .tsx にします。.ts に JSX を書くと、別のエラーになります（→ Unterminated regular expression literal の記事）。

"strict": false で消えるのは、直したのではない

@types/react が無いまま、"strict": false にすると、TS7026 は出なくなりました。

$ npx tsc --noEmit -p e-nostrict

しかし、これは型の表が見つかったのではありません。Handbook が書くとおり、表が無いと型チェックはされないので、調べるのを止めただけです。消し方としては勧めません。

よくある質問

TS17004 も一緒に出ています。どう直しますか？

jsx を tsconfig.json に書いて、@types/react を入れると、両方が消えました。TS17004 の直し方は、Cannot use JSX unless the '--jsx' flag is provided の記事にあります。

"jsx" は "react-jsx" と "preserve" のどちらにしますか？

Vite の react-ts のひな形は react-jsx です。jsx の選べる値は、preserve・react・react-native・react-jsx・react-jsxdev で、値ごとの出力の違いは tsconfig の記事にまとめました。preserve を選ぶなら、手元の結果では "types": ["react"] が要りました。

TypeScript 6.0 と 7.0 で、エラーの文は違いますか？

TS7026 の文は同じでした。違いがあったのは終了コードで、7.0.2 は 1、6.0.3 は 2 でした。

tsx や node で動かすときも、このエラーは出ますか？

tsx と node の型の取り除きは、どちらも型を調べません。手元では、型の誤りのある .ts が、npx tsx でも node でも止まらずに動きました。TS7026 そのものを tsx で流してはいません。型は npx tsc --noEmit で別に調べます。tsx と node のくらべは、npx tsx の記事にあります。

まとめ

TS7026 は、JSX.IntrinsicElements（タグの型の表）が見つからないときの文です。React では、この表を @types/react が持っています
手元で出たのは、jsx が無いとき（TS17004 も）、@types/react が無いとき（TS7016 も）、"jsx": "preserve" で types が無いとき、の 3 つです
直し方は、@types/react と @types/react-dom を入れ、"jsx": "react-jsx" を書くことです。preserve なら "types": ["react"] を足します
"strict": false で消えるのは、調べるのを止めただけです
TypeScript 7.0.2 と 6.0.3 で、エラーの文は同じでした