「JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.」の解決方法

はじめに

HonoでJSXを使おうとしたところエラーが発生しました。

前提

tsconfig.jsonのcompilerOptionsには公式ドキュメント通りのjsxの設定をしています。

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "strict": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true,
    "types": ["node"],
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "rootDir": "./",
    "outDir": "./dist"
  },
  "exclude": ["node_modules"]
}

問題

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

ディレクトリ構成

my-app/
├── drizzle.config.ts
├── package.json
├── pnpm-workspace.yaml
├── tsconfig.json
└── src/
	├── index.ts /apiのエンドポイント
	├── index.tsx /のエンドポイント（jsxを返す）
	└── db/
		└── schema.ts

原因

index.tsとindex.tsxが同じディレクトリに存在することが原因でした。

# 実行したコマンド
npx tsc --noEmit --listFilesOnly | grep -v node_modules

# 出力結果
/Users/workspace/my-app/drizzle.config.ts
/Users/workspace/my-app/src/db/schema.ts
/Users/workspace/my-app/src/index.ts

実行したコマンドは型チェックの対象のTypeScriptのファイルからnode_modules以外のファイルを出力するものです。
出力結果からindex.tsxは型チェックの対象になっていないことがわかります。つまり、tsconfig.jsonの内容を無視してエディタがエラーを出しているということです。

解決方法

ファイル名をindex.tsx → pages.tsxに変更

おわりに

compilerOptionsの設定は正しかったのですが、それがindex.tsxに反映されていませんでした。