JSX.IntrinsicElements ts(7026) が存在しない場合の対処法

概要

npx create-next-app@latest

Next.JSアプリを作成した際に生成されたコードの状態で静的解析エラーが表示された。

インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。ts(7026)

解決手順

npm i

パッケージをインストールする事でnode_modulesが生成され静的解析エラーは解消。

原因

型定義ファイル（@types/*）の未配置

node_modulesが存在しない為、型定義ファイルが見つからず型情報を解決できず暗黙的にanyとして扱われ静的解析でエラーとなる。

そもそもなぜnode_modulesが無い？

npxとnode_modulesの関係

npxは「ローカルになければリモートから一時的に取得して実行する」仕組みの為、存在していなかった。

npx <package>実行時、プロジェクト内のnode_modulesにパッケージ有無を確認し
以下の様に動作する。

• 存在する場合

  • ローカルのものを使用

• 存在しない場合

  • 一時的にパッケージをグローバルキャッシュにダウンロードし実行
  • 実行後はキャッシュ以外の場所には残らない為、必要な以外は永続化されない

まとめ

npxの理解不足でした...