Error: Converting circular structure to JSON

[SamuelScheit]

🐛 Bug Report

Sorry, I don't know why the bug happens, or how do I make a reproducable repo, but I've attached the error log.
Maybe you could use circular-json, flatted or Mozilla's solution to JSON.stringify the object?

Runtime environment

## System:
 - OS: macOS 10.15.6
 - CPU: (4) x64 Intel(R) Core(TM) i5-6600 CPU @ 3.30GHz
 - Memory: 146.43 MB / 16.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 12.18.3 - /usr/local/bin/node
 - npm: 6.14.6 - /usr/local/bin/npm
## npmPackages:
 - @loadable/component: ^5.13.2 => 5.13.2 

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLDivElement'
    |     property '__reactInternalInstance$vdoja2d0sih' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle

InnerLoadable.getCacheKey
node_modules/@loadable/component/dist/loadable.esm.js:227
  224 | ;
  225 | 
  226 | _proto.getCacheKey = function getCacheKey() {
> 227 |   return _getCacheKey(this.props) || JSON.stringify(this.props);
      | ^  228 | }
  229 | /**
  230 |  * access the persistent cache

InnerLoadable.getCache
node_modules/@loadable/component/dist/loadable.esm.js:235
  232 | ;
  233 | 
  234 | _proto.getCache = function getCache() {
> 235 |   return cache[this.getCacheKey()];
      | ^  236 | }
  237 | /**
  238 |  * sets the cache value. If called without value sets it as undefined

or another format:

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLDivElement'
    |     property '__reactInternalInstance$vdoja2d0sih' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle
    at JSON.stringify (<anonymous>)
    at InnerLoadable.getCacheKey (loadable.esm.js:227)
    at InnerLoadable.getCache (loadable.esm.js:235)
    at InnerLoadable.componentDidMount (loadable.esm.js:192)
    at commitLifeCycles (react-dom.development.js:19814)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    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 scheduleUpdateOnFiber (react-dom.development.js:21199)
    at Object.enqueueSetState (react-dom.development.js:12639)
    at F7View.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471)
    at Object.setPages (view.js:152)
    at Router.pageComponentLoader (components-router.js:59)
    at Router.load (navigate.js:647)
    at asyncResolve (navigate.js:785)
    at asyncPage (routes.js:6)
    at resolve (navigate.js:792)
    at navigate.js:866
    at enterNextRoute (process-route-queue.js:59)
    at leaveCurrentRoute (process-route-queue.js:80)
    at Router.<anonymous> (process-route-queue.js:83)
    at Router.navigate (navigate.js:851)
    at app.jsx:55

[open-collective-bot]

Hey @Flam3rboy 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use Loadable at work, you can also ask your company to sponsor us ❤️.

[theKashey]

After initial investigation I've found that JSON.stringify(this.props) is not needed at all.

If something does not define cacheKey - it does not respond to prop change.

[diffidentDude]

I had a similar issue to this, using @loadable/component@5.13.2, reverted to 5.13.1 and the issue doesn't come up.

It's something to do with a component that uses the useContent react hook, which contains a reference to the parent component. When the code tries to create the cacheKey it would fail because of the circular structure.