Application Error: Converting circular structure to JSON when using timelineContent

[cabal-daniel]

Describe the bug
Got this error when I tried to define timelineContent. In fact I just used the tutorial object of

{
  title: "May 1940",
  cardTitle: "Dunkirk",
  cardSubtitle:
    "Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.",
  cardDetailedText: ["paragraph1", "paragraph2"],
  timelineContent: <div>Custom content</div>,
}

to reduce the scope

Unexpected Application Error!
Converting circular structure to JSON --> starting at object with constructor 'Object' | property '_context' -> object with constructor 'Object' --- property 'Provider' closes the circle
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property '_context' -> object with constructor 'Object'
    --- property 'Provider' closes the circle
    at JSON.stringify (<anonymous>)
    at ko (http://localhost:5173/node_modules/.vite/deps/react-chrono.js?v=03ec20ec:2928:12)
    at renderWithHooks (http://localhost:5173/node_modules/.vite/deps/chunk-T7VP4UGM.js?v=03ec20ec:12171:26)
    at updateFunctionComponent (http://localhost:5173/node_modules/.vite/deps/chunk-T7VP4UGM.js?v=03ec20ec:14577:28)
    at beginWork (http://localhost:5173/node_modules/.vite/deps/chunk-T7VP4UGM.js?v=03ec20ec:15912:22)
    at beginWork$1 (http://localhost:5173/node_modules/.vite/deps/chunk-T7VP4UGM.js?v=03ec20ec:19749:22)
    at performUnitOfWork (http://localhost:5173/node_modules/.vite/deps/chunk-T7VP4UGM.js?v=03ec20ec:19194:20)
    at workLoopSync (http://localhost:5173/node_modules/.vite/deps/chunk-T7VP4UGM.js?v=03ec20ec:19133:13)
    at renderRootSync (http://localhost:5173/node_modules/.vite/deps/chunk-T7VP4UGM.js?v=03ec20ec:19112:15)
    at recoverFromConcurrentError (http://localhost:5173/node_modules/.vite/deps/chunk-T7VP4UGM.js?v=03ec20ec:18732:28)

To Reproduce
Steps to reproduce the behavior:

1. Define timelineContent with any dom object
2. If you remove timelineContent, you should see the component renders fine.

Expected behavior
Render the card

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOs
• Browser Chrome
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[sitoftonic]

I'm also having the same problem. It appears after adding allowDynamicUpdate prop to true

[sitoftonic]

It seems the circular dependency in my case is caused by this effect that can be found in https://github.dev/prabhuignoto/react-chrono/blob/master/src/react-chrono.ts, more precisely the JSON stringify in the dependency array:

useEffect(() => {
  const _items = items?.filter((item) => item);
  let newItems: TimelineItemModel[] = [];

  if (!_items?.length) {
    const lineItems = initItems();
    setTimeLineItems(lineItems);
    return;
  }

  if (timeLineItems.length && _items.length > timeLineItems.length) {
    newItems = updateItems(_items);
  } else if (_items.length) {
    newItems = initItems(_items);
  }

  if (newItems.length) {
    timeLineItemsRef.current = newItems;
    setTimeLineItems(newItems);
    setActiveTimelineItem(0);
  }
}, [JSON.stringify(allowDynamicUpdate ? items : null)]);

And it's because I was providing an icon to the Timeline element like this:

icon: <EmailIcon className="w-5 h-5" />,

The solution was to provide it with a callback function instead of the component itself, like this:

getIcon: () => <EmailIcon className="w-5 h-5" />,

It would be nice however to refactor the dependencies in the effect. I'm not saying the JSON.stringify must go out, I understand it's there for some reason (and that caveats have been taken into consideration), but at least it would be good to replace the stringify function for a safer stringify version.

[Priyanshu-DS]

I am facing the same issue, @sitoftonic how did you resolve the issue?