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

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:

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",
  }
}

Can you please share a minimal reproduction for us to help?

I'm also getting this... any updates to make this work?

Okay. I managed to fix this. Downgrading react doesn't work since react is now bundled with nextjs and it's using it's own internal react. So you can either try and point the react plugin for vitejs at the development version of react inside of nextjs, OR simply remove your project's dependencies on react and react-dom. The latter was much simpler for me.

Any workaround to work with React 19 for this?

@jay-linumlabs

@jay-linumlabs Have you found any workaround for this? I assume it is not a react-testing-library alone issue, React cannot be soo not backward incompatible. If my assumptions are correct, then what configuration are we doing wrong?

@bramski

@jay-linumlabs Have you found any workaround for this? I assume it is not a react-testing-library alone issue, React cannot be soo not backward incompatible. If my assumptions are correct, then what configuration are we doing wrong?

I ended up not using vitest so I can move forward. I'm not sure if any recent changes or updates have resolved this issue. @bramski has a suggestion that could possibly work, but I have not tried it out.

Hello fellow vibe coders, I ran into this issue and got Claude to explain what went wrong in my case. Use the suggested workaround at your own peril, YMMV. This should work for those who want Next+React+Vitest in their stack.

Next.js 16 + React 19 + Vitest Testing Issue

  The Problem: You trust that npm overrides work automatically. They don't—especially in monorepos with existing lock files.

  What's Actually Wrong: React 18 gets installed alongside React 19 because your lock file persists old versions. Vitest then loads two React versions and breaks.

  The Config Error to Expect:
  # This reveals the problem:
  npm list react

  # You'll see:
  react@18.3.1 invalid: "^19.2.0" ... overridden  # ← Old version still there!
  react@19.2.0 deduped                             # ← New version also there!

  Why This Happens in Turborepo: Workspace hoisting means @testing-library/react lives at root, but React 19 is only installed in your app. Testing lib finds React 18 first.

  The Fix:
  # 1. Clean install to force overrides
  rm -rf node_modules package-lock.json
  npm install

  # 2. Install React 19 at ROOT (critical for hoisted testing libs)
  # Add to ROOT package.json:
  {
    "devDependencies": {
      "react": "^19.2.0",
      "react-dom": "^19.2.0"
    }
  }

  # 3. Add Vite aliases in vitest.config.ts:
  resolve: {
    alias: {
      'react': path.resolve(__dirname, '../../node_modules/react'),
      'react-dom': path.resolve(__dirname, '../../node_modules/react-dom'),
      'react/jsx-runtime': path.resolve(__dirname, '../../node_modules/react/jsx-runtime.js'),
      'react/jsx-dev-runtime': path.resolve(__dirname, '../../node_modules/react/jsx-dev-runtime.js'),
    }
  }

  Verify: npm list react should show ONLY 19.x with "deduped" (no "invalid").

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

MatanBobi commented on Mar 18, 2025

bramski commented on Jul 4, 2025

bramski commented on Jul 7, 2025

aralroca commented on Oct 1, 2025

trdp30 commented on Oct 4, 2025

jay-linumlabs commented on Oct 6, 2025

johnhkchen commented on Nov 14, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions