You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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!
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:This is a simplified copy of my Chart.stories.jsx, from the reproduction repo:
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
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
The text was updated successfully, but these errors were encountered: