Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: Converting circular structure to JSON #629

Closed
SamuelScheit opened this issue Sep 15, 2020 · 3 comments · Fixed by #630
Closed

Error: Converting circular structure to JSON #629

SamuelScheit opened this issue Sep 15, 2020 · 3 comments · Fixed by #630
Assignees

Comments

@SamuelScheit
Copy link

🐛 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
Copy link

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 ❤️.

@SamuelScheit SamuelScheit changed the title Converting circular structure to JSON Error: Converting circular structure to JSON Sep 15, 2020
@theKashey
Copy link
Collaborator

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.

@theKashey theKashey self-assigned this Sep 15, 2020
@diffidentDude
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants