Victory: Converting circular structure to JSON in victory-shared-events 34.3.9

[gucolin]

Checklist

• [X] This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• [X] I have read through the FAQ and Guides before asking a question

• [X] I am using the latest version of Victory

• [X] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

Running into the following error when rendering chart using the latest version of Victory. The error stack points to code introduced in this change: https://github.com/FormidableLabs/victory/pull/1592

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'SVGSVGElement'
    |     property '__reactInternalInstance$r1kbehfrxt8' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle
    at JSON.stringify (<anonymous>)
    at victory-shared-events.js:173
    at Array.reduce (<anonymous>)
    at alterChildren (victory-shared-events.js:158)
    at victory-shared-events.js:162
    at Array.reduce (<anonymous>)
    at alterChildren (victory-shared-events.js:158)
    at VictorySharedEvents.getNewChildren (victory-shared-events.js:202)
    at VictorySharedEvents.getContainer (victory-shared-events.js:209)
    at VictorySharedEvents.render (victory-shared-events.js:245)
    at finishClassComponent (react-dom.development.js:17160)
    at updateClassComponent (react-dom.development.js:17110)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at batchedEventUpdates$1 (react-dom.development.js:21877)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at dispatchUserBlockingUpdate (react-dom.development.js:4172)

[gucolin]

Reverted victory-shared-events back to 34.3.8 appeared working

[dtaylor113]

+1 I'm also seeing this.

[NgoKnows]

@gucolin or @dtaylor113 can you post a minimal reproduction in codesandbox

[gucolin]

Hi @NgoKnows

Sorry I won't have bandwidth to create a repro in the short term, and I suspect it only fails when certain chart were used. I was using cursor container (which uses share events) and custom data components.

But I'm pretty sure this is introduced inline 174 of https://github.com/FormidableLabs/victory/pull/1592/files.

Hope this helps.

[lajtmaN]

I'm experiencing this as well using the new VictoryHistogram.
I can reproduce it in this codesandbox: https://codesandbox.io/s/optimistic-snowflake-vwtws
The code to do the chart is borrowed from: https://formidable.com/open-source/victory/gallery/stacked-histogram/

To trigger the exception change the "group by property" multiple times

[luciob]

I'm facing more or less the same issue (instead of constructor FiberNode I got constructor EC with victory: 34.3.11.
The error is thrown at line 173 of victory-shared-events.js.

This is the line in detail:

const sharedEventsCacheValues = [name, baseProps, childEvents, JSON.stringify(this.state[name])];

I can't post code to reproduce it right now, btw my scenario is the following: I have a line which is always plotted and a checkbox that if toggled makes two other lines appear near the first one. If I click 2/3 times in a short amount of time it crashes badly with the same error posted above.
By doing debug on the console I saw that name prop cycles through all plotted lines including axis, and it seems like the crash is caused by the addition of a new item that wasn't in the events cache before.

Moving to v35.x did not solve the issue for me.

I've found a temp. workaround (an ugly one) for the issue switching from rendering/removing line component on demand, to always render it but making transparent/visible color on demand.

+1 for finding a robust solution inside the library

[DHAVAL7723]

1+ I am also facing same error !!!!
Happy to have solution as soon as possible.
Happy Victory :)

[wilecoyote2015]

Same for me!
Unfortunately, (as usual, ) no help from the developers yet, so I found multiple possible solutions!
They're named, for example, ReChart, Nivo, VX, ...

[Gablooblue]

+1 I am also facing the same error after trying to copy the Stacked Histogram Example in the Victory Gallery

Issue doesn't show up on chart load but when I hover over the chart it errors. Currently using Victory 35.0.8 with victory-shared-events 35.0.8

Hope this will be fixed soon as it makes stacked histograms hard to label without using a legend or setting up an event

[dweste01]

+1 I have the same issue as @Gablooblue- renders fine, but crashes with the circular JSON error on hover.

My similar but slightly different setup is:

• a VictoryChart with VictoryVoronoiContainer as its containerComonent, with a custom tooltip passed in as labelComponent
• a VictoryGroup with multiple VictoryStacks (each made up of VictoryBars) - so a stacked, grouped, bar graph

Interestingly, I am only getting the error when I have a single VictoryBar in each VictoryStack (so the resulting graph looks like a straightforward grouped bar graph)- but when i have multiple bars in the VictoryStack (to make it an actual 'stack'), it works fine! Not sure if that helps to point in the right direction

[tugkankibar]

Unfortunately this issue has been plaguing us as well. We have a lot of different line on a line chart; with changing colors based on a "visibility button" and any rerender is basically a chance this will happen at the moment.

[krrrr38]

Tooltip also invokes many js rendering, then cause this error easily.
I also change my chart as static chart for workaround. hope this will fix soon.

[CaioCordeiro]

I'm still getting this error :/.
It's occurring when i use the containerComponent={<VictoryZoomContainer zoomDomain={{ x: xRange, y: yRange }} />}
being xRange and yRange an array with 2 elements ([min,max]).
Victory version: "victory": "^35.4.0"

Here's the error mensage:
Uncaught TypeError: Converting circular structure to JSON --> starting at object with constructor 'SVGSVGElement' | property '__reactInternalInstance$qifi3o3gcgm' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle

[CaioCordeiro]

I'm still getting this error :/.
It's occurring when i use the containerComponent={<VictoryZoomContainer zoomDomain={{ x: xRange, y: yRange }} />}
being xRange and yRange an array with 2 elements ([min,max]).
Victory version: "victory": "^35.4.0"

Here's the error mensage:
Uncaught TypeError: Converting circular structure to JSON --> starting at object with constructor 'SVGSVGElement' | property '__reactInternalInstance$qifi3o3gcgm' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle

I found the problem.
For some reason the chart returns this error when you use the <VictoryZoomContainer/> and have a <VictoryGroup/> inside it.

[boygirl]

@CaioCordeiro

I tried to reproduce the issue you're seeing, but I couldn't do it. Could you alter this codesandbox to show me what's going wrong?

https://codesandbox.io/s/issue-1608-repro-attempt-6pvre?file=/index.js

[CaioCordeiro]

@CaioCordeiro

I tried to reproduce the issue you're seeing, but I couldn't do it. Could you alter this codesandbox to show me what's going wrong?

https://codesandbox.io/s/issue-1608-repro-attempt-6pvre?file=/index.js

I also failed to reproduce it.
What a intriguing problem.
Maybe it was something with my environment.
For some reason when i removed the <VictoryGroup/> from my code.
I can't share a lot for privacy issues.