症状
Reactでnpmstartしたとき、下記エラーが発生してしまいました。コンパイルエラー発生していませんでした。エラーメッセージ
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
翻訳すると、「エラー：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、取得されました：未定義。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れたか、デフォルトのインポートと名前付きのインポートを混同している可能性があります。」
要素タイプが無効だそうですが、若干意味がつかみにくく調べてみると、こちらが出てきました。
サイトを参考にしたところ、2つのいずれかで発生するみたいです。
1.export もしくは import を間違えている
2.setState() 内の記述が誤っている
が、どちらも該当するミス等は見つかりませんでした。
Hoge.jsx
import React, { Fraeegment } from "react";
export const Hoge = () => {
return(
<Fraeegment>
{"Fuga"}
</Fraeegment>
)
}
解決策
importしていたFragmentのスペルが間違っていたため、エラーが発生していました。 Fragmentのスペルを修正したら、解決しました。Hoge.jsx
import React, { Fragment} from "react";
export const Hoge = () => {
return(
<Fragment>
{"Fuga"}
</Fragment>
)
}
もう一度エラーを見直すと、「エラー：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、取得されました：未定義。」とあり、returnの中にある要素タイプが未定義であるため、要素タイプが無効と怒られていたようです。