Skip to content

Fix the “Objects are not valid as a React child” error

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

I had this error in a React (Next.js) app:

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.

After some time trying to figure out what the error meant, I figured out I was exporting my page component as async because I copied it from another Next.js project where this is possible because of the use of the app folder:

export default async function Page() {

}

But it was not possible in the pages folder.

Removing async made it work:

export default function Page() {

}
→ Get my React Beginner's Handbook
→ Read my full React Tutorial
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)