‹ 画面側でしか使えないものをサーバー側で使った（Next.js）外の画像のアドレスが許可されていない（Next.js） ›

コードの書き間違い出る場所：ブラウザの画面・開発者ツールたまに出る

部品の読み込み方が違う（React）

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

ひとことで言うと

「読み込んだ部品（コンポーネント）が、空っぽでした」という意味です。import の書き方が、部品の書き出し方と合っていないことがほとんどです。

よくある原因

import Button from と import { Button } from を取り違えている
ファイルの最後に export default を書き忘れた
部品の名前のつづりが違う

自分で確かめること

読み込み元のファイルで、export default か export function かを見る

たいていは、こうすると直ります

export default なら { } なしで、export function なら { } ありで import します。

AIへの伝え方

下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。

次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。

【エラー】
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

【やったこと】
（ここに、エラーが出る前にしたことを書く。例：npm run dev を実行した）

【参考】
このエラーは「部品の読み込み方が違う（React）」というもので、よくある原因は次のとおりです。
・`import Button from` と `import { Button } from` を取り違えている
・ファイルの最後に `export default` を書き忘れた
・部品の名前のつづりが違う

どれに当てはまるかを確かめる方法も教えてください。