TypeError: Converting circular structure to JSON

[gidomanders]

Description

backend.bundle.js produces massive amounts of error logs and is blocking interaction of my React 18 application.

Reproduction

I am not allowed to share my project, but I can provide more details if necessary.

System information

MacOS 15.2, Chrome 131.0.6778.205, React 18.3.1

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!

[garrettlchow]

Thanks for reporting this error! To help diagnose the issue, could you share:

Your project's package.json
Bundler config (webpack/vite/rollup)
Babel config (e.g. .babelrc or babel.config.js)

This seems related to JSX parsing and compatibility between @babel/parser versions. The full error context and configs will help us identify if it's a bundling conflict or parser version mismatch.

[gidomanders]

I can definitely share those files! The project is using Vite. Here's the package.json and vite config. I don't have a Babel customization file; we use mostly Vite defaults.
package.json

import react from '@vitejs/plugin-react-swc';
import * as path from 'path';
import { terser } from 'rollup-plugin-terser';
import { defineConfig } from 'vite';
import checker from 'vite-plugin-checker';
import { BLOB, DATA, getCSP, HASHES, INLINE, SELF } from 'csp-header';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig(() => ({
  plugins: [
    react(),
    checker({
      typescript: true,
      eslint: {
        lintCommand: 'eslint src --ext js,jsx,ts,tsx --max-warnings=0"'
      },
      enableBuild: false
    }),
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ],
  root: path.resolve(__dirname),
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler'
      }
    }
  },
  build: {
    emptyOutDir: true,
    outDir: './build',
    minify: 'terser',
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          let extType = assetInfo.name?.split('.').at(1);
          if (extType && /png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = 'img';
          }
          return `static/${extType}/[name]-[hash][extname]`;
        },
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js'
      },
      plugins: [
        terser({
          format: {
            comments: false
          }
        })
      ]
    }
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        secure: false
      }
    },
    headers: {
      'content-security-policy': getCSP({
        directives: {
          'default-src': [SELF],
          'form-action': [SELF, 'accounts.google.com'],
          'style-src': [SELF, INLINE],
          'img-src': [SELF, DATA, 'i.ytimg.com'],
          'font-src': [SELF, DATA, 'fonts.gstatic.com'],
          'script-src': [SELF, 'www.youtube.com'],
          'script-src-attr': [HASHES],
          'script-src-elem': [
            SELF,
            'www.youtube.com',
            // Vite included scripts that provide the dev environment
            "'sha256-Z2/iFzh9VMlVkEOar1f/oSHWwQk3ve1qk/C2WdsC4Xk='",
            "'sha256-eV5p0xsw4UC/bJ48fZ5luze2UmXZbYuQMHs4vAKQynQ='",
            // Vite included scripts that provide legacy browser support
            "'sha256-VA8O2hAdooB288EpSTrGLl7z3QikbWU9wwoebO/QaYk='",
            "'sha256-MS6/3FCg4WjP9gwgaBGwLpRCY6fZBgwmhVCdrPrNf3E='",
            "'sha256-+5XkZFazzJo8n0iOP4ti/cLCMUudTf//Mzkb7xNPXIc='"
          ],
          'frame-src': [SELF, 'www.youtube.com', 'localhost:8080'],
          'worker-src': [SELF, BLOB, DATA],
          'frame-ancestors': [SELF, 'www.youtube.com', 'localhost:8080']
        }
      })
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  define: {
    VITE_VERSION: JSON.stringify(process.env.npm_package_version),
    VITE_PACKAGE_NAME: JSON.stringify(process.env.npm_package_name),
    VITE_BUILT_AT: JSON.stringify(new Date().toUTCString())
  }
}));

[garrettlchow]

Thanks for providing the config files! Looking at your setup, I notice you're using:

• Vite with @vitejs/plugin-react-swc
• React 18.3.1
• TypeScript 5.7.2

The error you're seeing with Reactime might be related to how SWC (via @vitejs/plugin-react-swc) is transforming your JSX code. A few things we can try:

1. Can you temporarily switch to @vitejs/plugin-react instead of the SWC version? Update your vite.config.ts to:

import react from '@vitejs/plugin-react';
// ... rest of your imports

export default defineConfig(() => ({
  plugins: [
    react(),
    // ... other plugins
  ],
  // ... rest of config
}));

Let me know if you need any clarification or if you'd like to try other approaches.

[gidomanders]

With those changes, the application is now running as normal, but still logging (loads of) errors:

The errors repeat with every request the application sends to our API. Reactime is loading, though! Where it would not recognize my application before (v25), I now see a button to launch Reactime. When I click the button, an error is logged again, and the application is reloaded, but I don't see any difference in the Reactime tab in Chrome DevTools. It seems like Reactime cannot load due to the errors.

[shishirarora3]

vitejs/plugin-react-swc was being used for performance reasons, do we have any other fix for this?