Resolving the “Objects are not valid as a React child” Error

In one of my React (Next.js) applications, I encountered the following error message:

1 2	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 spending some time investigating the issue, I discovered that the error occurred because I had mistakenly exported my page component with the async keyword. This mistake happened because I had copied the component from another Next.js project where the async export was allowed in the app folder:

1
2
3

export default async function Page() {

}

However, in the pages folder, it was not possible to export the page component as async.

To resolve this error, all I needed to do was remove the async keyword from the page component export:

1
2
3

export default function Page() {

}

By making this change, the error disappeared and the page rendered without any issues.

tags: [“React”, “Next.js”, “error”, “troubleshooting”, “async”, “promise”]