久しぶりに React で開発したプロジェクトを触った時に発生したエラーです。
使用していたライブラリにいくつか古いものがあったので、様子を見ながらアップデートした結果、ビルドは問題なく通るのに、実行してエラーになるという一番苦手なタイプのバグが発生しました…。
そしてエラー文の意味がいまいちよく分からない…。
エラー全文はこちらです。
Uncaught 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.
「キャッチされないエラー：要素タイプが無効です」「定義されているファイルからコンポーネントをエクスポートするのを忘れたか、デフォルトのインポートと名前付きインポートを混同している可能性があります。」とのこと。
…インポート辺りで何か間違っているということでしょうか？
で、今回参考にさせていただいた記事はこちらから。
【Redux】これハマった。。invariant.js:38 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. | 武骨日記
https://kenjimorita.jp/invariant-js38ncaught/
私が遭遇したバグの内容とほとんど同じ内容だったようで、非常に参考になりました！
まず、このエラーが発生する原因は、下記の 2つが考えられるとのことでした。
- export もしくは import を間違えている
- setState() 内の記述が誤っている
2 の setState() の記述については一切変更していないので、1 が原因のようです。
で、再度コードを確認してみたところ、確かに import 文が間違っていました…。
Material-UI という、React コンポーネントのライブラリを利用していたのですが、こちらのバージョンを大幅にアップデートしたところ、以前と書き方が変わっているものがいくつかあり、それでエラーになっていたようです。
そのため、サイトのサンプルコードをよく見ながら修正したところ、エラーが解消できました！
…ページが結構あるので先は長いですが…解決方法が分かったのでちまちまと修正していきます。
あと別件ですが、アイコンを利用するときに下記の書き方でないと正しく読み込めないようでした。
import HomeIcon from '@material-ui/icons/Home';
サイトには、下記の書き方でも OK のように書いてありましたが…実際に動かしてみたところ、<span> がどうとかというエラーが発生しました。
import { HomeIcon } from '@material-ui/icons';
これはいまいち原因がよく分からないのですが、とりあえずアイコンを使うときは 1つ目の書き方を使えば問題ないのでその通りにします。
以上、React で開発したプロジェクトで「Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.」エラーが発生した時の対処方法でした。
ご参考になれば幸いです。
