[Bug]: Uncaught TypeError: Converting circular structure to JSON

[anzuj]

Describe the bug

I came across a situation where my whole Storybook preview page bugged out whenever hovering over a specific argument in the docs table.

I use Storybook + Vite + React to manage a component library. My use case was making an amCharts chart component where the consuming app provides amCharts packages as props for my component to use. So, in the Storybook setting, my Story page supplies it. Everything works well apart from the autodocs table. As soon as I hover over the am5 argument, the whole doc page goes blank with the following error in the console:

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLDivElement'
    |     property '__reactFiber$xqzratogby' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle
    at JSON.stringify (<anonymous>)
    at ObjectControl (chunk-WUEYNJ53.js?v=e8c9c949:1058:156)
    at renderWithHooks (chunk-MWSGYS3J.js?v=e8c9c949:11548:26)
    at updateFunctionComponent (chunk-MWSGYS3J.js?v=e8c9c949:14582:28)
    at beginWork (chunk-MWSGYS3J.js?v=e8c9c949:15924:22)
    at HTMLUnknownElement.callCallback2 (chunk-MWSGYS3J.js?v=e8c9c949:3674:22)
    at Object.invokeGuardedCallbackDev (chunk-MWSGYS3J.js?v=e8c9c949:3699:24)
    at invokeGuardedCallback (chunk-MWSGYS3J.js?v=e8c9c949:3733:39)
    at beginWork$1 (chunk-MWSGYS3J.js?v=e8c9c949:19765:15)
    at performUnitOfWork (chunk-MWSGYS3J.js?v=e8c9c949:19198:20)

This is a simplified copy of my Chart.stories.jsx, from the reproduction repo:

import React, { useState } from 'react';
import * as am5 from '@amcharts/amcharts5';
import * as am5xy from '@amcharts/amcharts5/xy';
import { Chart } from './Chart';

export default {
  title: 'Chart',
  component: Chart,
  parameters: {
    layout: 'centered',
    docs: {
      source: { type: 'code', language: 'jsx' },
      controls: { sort: 'alpha' },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    label: {
      control: 'text',
      description: 'Chart label',
      table: {
        type: { summary: 'string' },
      },
    },
  },
  args: { am5: am5, am5xy: am5xy, label: 'Chart' },
};

export const Default = (args) => {
  return (
      <Chart {...args}></Chart>
  );
};

I've dug around for hours and found similar errors happening in the past with Angular such as here. It seems like Storybook tries to stringify arguments upon hover which causes the issue? What's a possible workaround to keep my Story functional? Unfortunately this did not work for me as am5 is a particulary.. exotic creature for an argument. Would appreciate any help here!

Reproduction link

https://stackblitz.com/edit/github-qwbfdq?file=src%2Fstories%2FChart.stories.jsx,package.json&preset=node

Reproduction steps

1. Go to the above link
2. Hover with the cursor over the "am5" argument in the docs table

System

System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm <----- active
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
@storybook/addon-docs: ^8.3.5 => 8.3.5
@storybook/addon-essentials: ^8.3.5 => 8.3.5
@storybook/addon-interactions: ^8.3.5 => 8.3.5
@storybook/addon-links: ^8.3.5 => 8.3.5
@storybook/blocks: ^8.3.5 => 8.3.5
@storybook/react: ^8.3.5 => 8.3.5
@storybook/react-vite: ^8.3.5 => 8.3.5
@storybook/test: ^8.3.5 => 8.3.5
storybook: ^8.3.5 => 8.3.5

Additional context

No response