ホームページ - EY-Office

2023-10-03

最近出会った謎エラーメッセージ

初心者にプログラミングの研修を行うときは「エラーメッセージをちゃんと読みましょう。エラーメッセージは正しく間違いの指摘はしてくれませんが、間違い解決のヒントを与えてくれます」と話し、わざと間違ったコードを書いてもらいエラーメッセージの読み方を教えています。

私自身は長年プログラマーをしているので、大抵のエラーメッセージはインタプリターやコンパイラー、実行時ライブラリーの気持ちになって理解できますが、たまに謎エラーメッセージに悩まされます。

Objects are not valid as a React child Stable Diffusion(mage.space)が生成した画像です

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Reactでフロントエンドを開発していて出会いました。Google翻訳すると、

エラー: オブジェクトは React の子として有効ではありません (見つかった: [オブジェクト Promise])。子のコレクションをレンダリングする場合は、代わりに配列を使用してください。

このエラーに出会った時は、仕様が明確ではない通信系のライブラリーを使い、あれこれ試している時でした。画面には何も表示されず、コンソールにこのエラーメッセージが表示されていました。
このエラーを発生させる簡単なコードは以下になります。

export default async function App() {
  return (
    <h2>Hello World!</h2>
  );
}

エラーの原因が判った後で、このエラーメッセージを読んでみると確かに、こAppコンポーネントの戻り値はJSX.Elementではありません。found: [object Promise] とエラーメッセージにあるように、Promiseを戻しています。

このコードの問題点はasync function です、正しくはfunction ですね。通信系ライブラリーを試していたので、コンポーネント内でawaitを使っていたのでコンポーネント（関数）にasyncを付けたのですが、awaitが無くなった後もasyncを消すのを忘れていました。

asyncがあるので関数の戻り値はPromise(JSX.Element)になり、エラーメッセージが言っている通りでした。😅

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.

Google翻訳すると、

エラー: 要素のタイプが無効です: 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要でしたが、取得されました: 未定義です。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れたか、デフォルトのインポートと名前付きインポートを混同した可能性があります。

私は新規のReactプロジェクトであればTypeScriptを使うのですが、このプロジェクトはJavaScriptを使っていたので、このエラーに出会いました。

このエラーを発生させる簡単なコードは以下になります（Next.js, React-Bootstrapを使っています）。

import { Link } from 'next/link';
import { Button } from 'react-bootstrap';

export default function App() {
  return (
    <Link href="/top">
      <Button>戻る</Button>
    </Link>
  );
}

一見正しそうですよね！ Next.jsをよく使っている方は気が付くかと思いますが・・・

正しくは、1行目は import Link from 'next/link'; です。うろ覚えで上のように書いたところ、このエラーメッセージが出会いました。自力では解決出来ず、検索して判りました。エラーメッセージの後半の デフォルトのインポートと名前付きインポートを混同した可能性があります に正しく指摘してますね。

そもそもTypeScriptを使っていればVS Code上でエラーが表示されます。やはりTypeScriptは良いですね。😃