How to debug "TypeError: Converting circular structure to JSON"?

[wmelton]

In the stack trace there is no helpful information at all as to what is triggering an "TypeError: Converting circular structure to JSON" error. In console there are no other errors. ESLint finds no syntax errors.

How does one see where/how in a Next/MDX project this error could be triggered?

[icyJoseph]

There's, roughly speaking, two reasons why JSON.stringify fails:

• Circular Data Structures
• BigInt

You are being bitten by the first.

This a rather difficult bug to catch because it means you've got a data structure that's pointing to itself, and that can be accomplished rather easily and by mistake, like:

let handler = {}
handler.payload = handler
console.log(handler) // { payload: [Circular] }

ESLint (I think), nor TypeScript can help you with this one, although TypeScript would make it slightly harder to accomplish:

let handler: {payload?: unknown} = {}
handler.payload = handler
console.log(handler)

One common circular object, is Window, you can see this in your browser console:

window === window.window // true

So, it is time to try and inspect your own calls to JSON.stringify, or places where Data goes from Server to Client, and see if you can spot a circular reference.

Maybe some variable shadowing that's gone wrong? Trying to stringify window? or some other global object?

Edit

Not a big fan of installing dependencies, but you could try https://github.com/sindresorhus/safe-stringify, which would help you see which one is [Circular].

[wmelton]

Hey @icyJoseph thanks for the response. The weird thing is, I got this error randomly while working through building out a mdx based doc site. It was odd because I wasn't working with any data objects at all when the error started appearing. I finally rolled back my theme/mdx updates a few commits and was able to clear the error, slowly add back the theme changes, and the error didn't reappear.

In that process, I also rolled back to node 16 from 18 before adding theme changes back in. Makes me wonder if there's an error on node 18 somewhere on the build tooling side of the house.

I'll check safe-stringify - that looks like a cool project. Thanks!

[ArjunCodess]

before eslint.config.mjs:

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [{
  ignores: ["node_modules/**", ".next/**", "out/**", "build/**", "next-env.d.ts"]
}, ...compat.extends("next/core-web-vitals", "next/typescript")];

export default eslintConfig;

after eslint.config.mjs:

import typescriptEslint from "@typescript-eslint/eslint-plugin";
import typescriptParser from "@typescript-eslint/parser";

const eslintConfig = [
  {
    ignores: [
      "node_modules/**",
      ".next/**",
      "out/**",
      "build/**",
      "next-env.d.ts",
    ],
  },
  {
    files: ["**/*.{js,jsx}"],
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      "prefer-const": "error",
      "no-var": "error",
      "no-unused-vars": "warn",
    },
  },
  {
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
        ecmaFeatures: {
          jsx: true,
        },
        project: "./tsconfig.json",
      },
    },
    plugins: {
      "@typescript-eslint": typescriptEslint,
    },
    rules: {
      "@typescript-eslint/no-unused-vars": "warn",
      "prefer-const": "error",
      "no-var": "error",
    },
  },
];

export default eslintConfig;

and it worked!