Vue-devtools: Getting an "Uncaught TypeError: Converting circular structure to JSON"

[jimmypuckett]

I am working with a deeply nested JSON object, and I am getting an "Uncaught TypeError: Converting circular structure to JSON" error when I try to examine my component in devtools.

I know that there is not much in this report to go on, so what could I provide to help troubleshoot?

[yyx990803]

What does the error stack look like?

[jimmypuckett]

Here you go...

Uncaught TypeError: Converting circular structure to JSON
Save.stringify @ extensions::SafeBuiltins:82
PortImpl.postMessage @ extensions::messaging:53
target.(anonymous function) @ extensions::SafeBuiltins:19
publicClass.(anonymous function) @ extensions::utils:94
sendMessageToDevtools @ proxy.js:73

[skyrpex]

Pretty sure you've got an object inside itself somewhere in your data. Should vue-devtools handle this case?

[jimmypuckett]

So I have an instance of leaflet map inside the vue instance & a string (API token for leaflet). I'm pretty sure that is all.

[rigor789]

Just came across this issue, in my case I have an object (es6 class) that gets the $vm in it's constructor, and then the object is set in the vm's $data array and that causes a circular reference that can't be converted to JSON.

[gdecris]

I am having the same issue using Mapbox (built on Leaflet). Makes me wonder if that is no coincidence. This could be an issue with how the Leaflet object is structured.

[rigor789]

I personally restructured my code, and didn't have any more issues after that. Basically I have a class that gets $vm through the constructor, but I don't set that object as a $data attribute to avoid circular references.

[srhise]

Having the same issue with google maps

[EdwardNelson]

I too am having the same problem with google maps

[Glutnix]

Vue Devtools should definitely handle circular references gracefully.

When Vue Devtools is generating the data/property value tree, it should check to see if an object is the same object as any of its ancestors, and instead of going deeper, show "«circular reference»".

[srhise]

@Glutnix where in the code does that occur? Sounds like something this group could fix for @yyx990803

[Glutnix]

I don't know, I haven't consulted the source code. I just described how you prevent circular references.

[yyx990803]

fixed via 2a626a3

[Glutnix]

Thank you Evan!

[codeofsumit]

I still have this issue in vue 2.0-rc.6 with leaflet

[alanwei43]

@codeofsumit try circular-json:

const CircularJSON = require('circular-json');

let json = CircularJSON.stringify(yourObject);