Posted inReact プログラミング

[React / Next.js / Error] Property ‘XXX’ does not exist on type ‘JSX.IntrinsicElements’. のエラー

[React / Next.js / Error] Property ‘XXX’ does not exist on type ‘JSX.IntrinsicElements’. のエラー

概要

  • componentを画面に表示しようとしたら次のエラーが発生しました。
  • 原因の把握から対応までの手順をまとめました。

開発環境

  • React 19.0.0-rc-69d4b800-20241021
  • Next.js 15.0.1

エラー内容

  • 画面にcomponentを表示だけの簡単な処理ですが次のエラーが発生しました。
  • そして次がソースコードです。
src\app\test\component.tsx
export default function component() {
  return (
    <div>test用component</div>
  );
}
src\app\test\page.tsx
import component from './component'

export default function Home() {
  return (
    <component/>
  );  
}

参考

原因

  • VS Codeのエラー内容ではわかり辛いですが、
    ブラウザ画面のエラーの内容をみると
    React component名は大文字で始まる必要があると書いてます。
Console Error

The tag <XXX> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

対応

component名を大文字から始まるようにします。

  1. componentでcompoenent名を大文字から始まるようにします。
  2. pageで修正したcomponentをimportします。
  3. pageで修正したcomponentを利用します。
src\app\test\component.tsx
// 1. compoenent名を大文字から始まるようにします。
export default function Component() {
  return (
    <div>test用component</div>
  );
}
src\app\test\page.tsx
// 2. 修正したcomponentをimportします。
import Component from './component'

export default function Home() {
  return (
    // 3. 修正したcomponentを利用します。
    <Component/>
  );  
}
  • それでエラーが解決されまして表示できるようになりました。

まとめ

  • componentを利用する際に、
    Property ‘XXX’ does not exist on type ‘JSX.IntrinsicElements’.
    のエラーが発生した場合の対応をまとめました。
  • component名は大文字から始まる名前にすることを
    忘れないように注意しましょう。
Tags: