2021.10.08 2023.01.20

TypeScriptで「JSX コンポーネントとして使用することはできません。」エラーの原因と対処法

プログラミング

表題の通りです。どうすれば「JSX コンポーネントとして使用することはできません。」エラーが起きないかをまとめました。

エラー内容

JSX コンポーネントとして使用することはできません。 その戻り値の型 'void' は、有効な JSX 要素ではありません。

返り値が裸のHTML Elementになっていたことが原因のようです。

原因が同じであれば、返り値をreturn()で囲うようにすれば解決するはずです。

import React from 'react'

export const Test= () => {
    <div>
      <p>test</p>
    </div>
}

import React from 'react'

export const Test= () => {
return (
    <div>
      <p>test</p>
    </div>
)}

別のエラーで悩まされていた最中だったので、Propsまわりや別の設定箇所に問題があるのではないかと勘違いしてしまい、少し時間がかかったので、備忘録としてまとめました。