Error: Converting Circular Structure to JSON

[rohaldb]

I'm unable to set the state of a deeply nested object. I get this error:

helpers.js:112 Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property 'fixtureRowProducts' -> object with constructor 'Array'
| index 0 -> object with constructor 'Object'
--- property 'fixtureRow' closes the circle
at JSON.stringify ()
at mutate (index.modern.js:72:1)
at Object.update (index.modern.js:144:1)
at reducer (index.modern.js:179:1)
at updateReducer (react-dom.development.js:16664:1)
at Object.useReducer (react-dom.development.js:17898:1)
at useReducer (react.development.js:1626:1)
at useUndoable (index.modern.js:203:31)
at FixtureEdit ([id].tsx:193:54)
at renderWithHooks (react-dom.development.js:16305:1)
at updateFunctionComponent (react-dom.development.js:19588:1)
at beginWork (react-dom.development.js:21601:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at HTMLUnknownElement.sentryWrapped (helpers.js:90:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)
at performSyncWorkOnRoot (react-dom.development.js:26085:1)
at flushSyncCallbacks (react-dom.development.js:12042:1)
at eval (react-dom.development.js:25651:1)

I am using it like this:

  const [fixtureGroup, setFixtureGroup] = useUndoable<
    FixtureGroupEntity | undefined
  >(undefined);

Initial value is undefined due to handling async, similar to your use case for resetInitialState.

In my case the FixtureGroupEntity is a deeply nested object.

Any ideas?

[xplato]

Hey @rohaldb! My sincere apologies for the delay. I am looking into this.

Can you perhaps provide some code that reproduces this error? Typically, this error arises from data that references itself/part of itself ("circular"), but it can also be the symptom of another issue. I will say, without knowing what your data looks like, it's best to keep pretty simple objects in useUndoable (just like useState). If your data is really complex, you can use a transformer to convert the data into something simpler for the purposes of local mutation.

Looking forward to your response!

[xplato]

Closing due to inactivity