Objects are not valid as a React child error in _document.tsx [Next.js]

Question

When I try to access the page with the following code:

export const getStaticProps = async (context: any) => {
    const res = await fetch(
        `https://pokeapi.co/api/v2/move/${context.params.move}`
    );
    const move = await res.json();

    return {
        props: {
            move,
        },
    };
};

export const getStaticPaths = async () => {
    const res = await fetch(`https://pokeapi.co/api/v2/move?limit=843`);
    const moves = await res.json();

    const movenames = moves.results.map((obj: any) => obj.name);

    const paths = movenames.map((movename: string) => ({
        params: {
            move: movename,
        },
    }));

    return { paths, fallback: false };
};

I get an error in the _document.tsx file. I don't have a custom one set, so the error is in the default _document.tsx file.

Here's the error I get: Error Image

Error: Objects are not valid as a React child (found: object with keys {name, url}). If you meant to render a collection of children, use an array instead.

../../pages/_document.tsx (89:33) @ Function.getInitialProps

  87 |     }
  88 | 
> 89 |     const { html, head } = await ctx.renderPage({ enhanceApp })
     |                                 ^
  90 |     const styles = [...flush()]
  91 |     return { html, head, styles }
  92 |   }

I've spent the last hour trying to debug and find solutions, but I couldn't find anyone else with the same issue.

Answer 1

I found the answer. Contrary to the error message, this was because I accidentally tried to render an object in my JSX. I put obj.type instead of obj.type.name . Oops.