【React】Property ‘xxx’ does not exist on type ‘JSX.IntrinsicElements’

ちょっとしたミスによるエラーですが、何度か起きて「!?」となってしまったので原因と対処法をメモしておきます。

エラー内容

Property 'xxx' does not exist on type 'JSX.IntrinsicElements'

原因

Reactコンポーネントでは、コンポーネント名の初頭を大文字とする必要があり、今回はコンポーネント名の初頭を小文字で指定してしまっていたことで警告文が表示されていました。

対処法

原因が同じであれば、コンポーネント名を大文字から始めれば解決されるはずです。

NG例

import React from 'react'

export const header = () => {
  return (
    <div>
      
    </div>
  )
}

OK例

import React from 'react'

export const Header = () => {
  return (
    <div>
      
    </div>
  )
}

まとめ

コンポーネントを普通に読み込んでいるのに変なエラーが出るなと思ったら、そのコンポーネント名だけ小文字から作成してしまっていました。あるある系のエラーですね。

参考

JSXでReact.Componentを宣言する時の注意点