BigInt: Error: Circular structure in "getInitialProps"

[PeterDekkers]

Hello!

It seems that whenever I have a BigInt value in my data I get a server error:

Server Error
Error: Circular structure in "getInitialProps" result of page "/". https://nextjs.org/docs/messages/circular-structure
This error happened while generating the page. Any console logs will be displayed in the terminal window.

The versions I am using are:

{
  "dependencies": {
    "next": "10.1.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "superjson": "^1.7.3"
  },
  "devDependencies": {
    "@types/react": "^17.0.3",
    "babel-plugin-superjson-next": "^0.2.3",
    "typescript": "^4.2.4"
  }
}

Here's a minimal reproduction:

import React from "react";
import { GetStaticProps, InferGetStaticPropsType } from "next";

export const getStaticProps: GetStaticProps = async () => {
    const topics = [
        {
            post_count: BigInt("22"),
        }
    ];
    return {
        props: {
            topics
        }
    };
}

export default function Home({ topics }: InferGetStaticPropsType<typeof getStaticProps>): React.ReactElement {
    return <></>;
}

[Skn0tt]

Circular Structure ... seems to be a display error in Next.js.
The real error that occurs is Do not know how to serialize a BigInt. This is likely a problem with SuperJSON itself. I'll take a look at it.

[PeterDekkers]

@Skn0tt thanks also for filing the bug fix in Next.js. Nice one!