Getting an "Uncaught TypeError: Converting circular structure to JSON" about devtools HOT 17 CLOSED

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.

from devtools.

What does the error stack look like?

from devtools.

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

from devtools.

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

from devtools.

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.

from devtools.

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.

from devtools.

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.

from devtools.

Having the same issue with google maps

from devtools.

I too am having the same problem with google maps

from devtools.

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»".

from devtools.

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

from devtools.

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

from devtools.

fixed via 2a626a3

from devtools.

Thank you Evan!

from devtools.

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

from devtools.

@codeofsumit try circular-json:

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

let json = CircularJSON.stringify(yourObject);

from devtools.

I'm working with Typescript + Vue project, had this error when working with openlayers.

The fix for me was to : Mounted() { } in my .ts file.

from devtools.