Next.js 13 app directory Error: Objects are not valid as a React child (found: [object Promise])

Question

I'm using Next.js 13's new app directory feature and have a page component at app/page.tsx that contains the following code:

"use client";

import { useState } from "react";

export default async function IndexPage() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  );
}

Since I need to use useState, I added the 'use client' directive at the top.

But I'm getting the following error when loading the page.

Server Error
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.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

score 2 · Accepted Answer · answered Feb 21 '23 at 10:33

The problem was that the component was marked as async but it's a client component and there are no await calls within the component. Removing async from the component declaration fixed the issue.

"use client";

import { useState } from "react";

// Must not be async.
export default function IndexPage() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  );
}

Next.js 13 app directory Error: Objects are not valid as a React child (found: [object Promise])

1 Answers1