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

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

エラー内容

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

原因

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

解決策

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

NG例

import React from 'react'

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

OK例

import React from 'react'

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

まとめ

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

ー この記事をシェアする? ー

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

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシー利用規約が適用されます。