Fix the “Objects are not valid as a React child” error
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
→ I wrote 17 books to help you become a better developer:
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025