vuejs / router

🚦 The official router for Vue.js
https://router.vuejs.org/
MIT License
3.91k stars 1.19k forks source link

TypeError: Converting circular structure to JSON #2387

Closed lukaszarpak closed 1 week ago

lukaszarpak commented 1 week ago

Reproduction

https://stackblitz.com/edit/vue3-vite-starter-6fdvet?file=src%2Fmain.js

Steps to reproduce the bug

Navigate between routes

Expected behavior

Navigation should run without any errors

Actual behavior

After trying to navigate between routes there is such an error in the console:

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'

Additional information

The reason to set from object in the localStorage is to then use it to go back to it on another route, even if the user refreshes the page. from object should not have any circular dependencies inside of it, it's an anti pattern and should not be used. When the app is run in a dev mode the error does not occur, which also makes it inconsistent from the DX point of view.

posva commented 1 week ago

You can serialize the from.fullPath if you need to restore a location. FYI circular dependencies is not an anti pattern per se, it’s fine in this case

lukaszarpak commented 1 week ago

@posva why is there a difference between dev and prod environment then?

posva commented 1 week ago

My guess is devtools. To make sure, you can check the difference between the objects. But even in prod, the resolved location is not always fully serializable