Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Error: Objects are not valid as a React child ...

オープン
  • 何か問題がありますか？
#1,387 コメント 7 件 リアクション 7 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
javascript, next.js, react
領域
frontend, testing-qa

調査の方向性

まず、package.json に示されている React 19、Next.js、Vitest の依存関係の組み合わせで失敗を再現し、次に動作する React 18 のセットアップと比較します。報告された react-dom のスタックトレースを入口として使用します。完了の条件は、新しい Next.js アプリケーションが無効な React 子要素エラーなしで Vitest のテストを実行できることです。

索引モデルが issue の本文から書いたものです。

説明

Description:
Integrating vitest with a fresh nextJS application results in the following error:

Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
 ❯ throwOnInvalidObjectType ../../node_modules/react-dom/cjs/react-dom.development.js:13123:9
 ❯ reconcileChildFibers ../../node_modules/react-dom/cjs/react-dom.development.js:14064:7
 ❯ reconcileChildren ../../node_modules/react-dom/cjs/react-dom.development.js:19193:28
 ❯ updateHostRoot ../../node_modules/react-dom/cjs/react-dom.development.js:19912:5
 ❯ beginWork ../../node_modules/react-dom/cjs/react-dom.development.js:21654:14
 ❯ beginWork$1 ../../node_modules/react-dom/cjs/react-dom.development.js:27465:14
 ❯ performUnitOfWork ../../node_modules/react-dom/cjs/react-dom.development.js:26599:12
 ❯ workLoopSync ../../node_modules/react-dom/cjs/react-dom.development.js:26505:5
 ❯ renderRootSync ../../node_modules/react-dom/cjs/react-dom.development.js:26473:7
 ❯ performConcurrentWorkOnRoot ../../node_modules/react-dom/cjs/react-dom.development.js:25777:74

This uses React 19.

If I downgrade to React 18 it works:

Working Screenshot:

Image

Working package.json

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "check-types": "tsc --noEmit",
    "test": "vitest run",
    "test:coverage": "vitest run --coverage",
    "test:watch": "vitest run --watch"
  },
  "dependencies": {
    "next": "15.2.3",
    "react": "18.3.1",
    "react-dom": "18.3.1"
  },
  "devDependencies": {
    ...
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.1",
    ...
    "vitest": "^3.0.9",
     "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.2.0",
    "@testing-library/react-native": "^13.2.0",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
  }
}
主要言語
JavaScript
スター
19.7k
フォーク
1.2k
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

testing-library/react-testing-library のほかの issue

testing-library/react-testing-library の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。