Dumping navigation data throws TypeError: Converting circular structure to JSON

[ReduxFlakes]

I was working on adding complex navigation and breadcrumbs to my site, however I got to a point where I wanted to access the page data trough the navigation as well, since it would be nice to show the description of the pages on the navbar.
I saw that eleventy-navigation-v1.0.0 had implemented support for this and so I updated it, unfortunately there's seems to be a bug where if I try to dump the data on this version (or any newer version past v1.0.0) using:

{% set navigation = collections.all | eleventyNavigation %}
{{ navigation | dump | safe }}

Eleventy throws a TypeError:

[11ty]   TypeError: Converting circular structure to JSON
[11ty]     --> starting at object with constructor 'GlobalDependencyMap'
[11ty]     |     property 'config' -> object with constructor 'Object'
[11ty]     --- property 'uses' closes the circle (via Template render error)

and ends up crashing the web server.

Now I think what's happening here is that, when it goes to cycle trough the page data it also goes trough the eleventyNavigation object, even though we already have it in the object, however I think that is fixed with this commit? I'm not sure, I'm not that experienced in JS so it would be nice to have more eyes on this, other than that I am able to get the page data correctly.

[dwkns]

Cross post with Discord

A circular references occurs when an object refers back to itself, causing an infinite loop. I don't know Eleventy Navigation, but this probably isn't a bug.

If you do {{ collections.all | dump }} you'll have the same problem.

Try using eleventy-plugin-console-plus to print out collections.all and it won't error. By default it only prints out 4 levels deep thus avoiding the infinite loop.

I suspect the same will be true of your navigation object.

[dwkns]

Incase you were wondering eleventy-plugin-console-plus uses utility.inspect under the hood which resolves circular references and allows you to print them. | dump I suspect uses JSON.stringify() which errors with circular references.

[Ryuno-Ki]

Your suspicion is correct.

[ReduxFlakes]

Incase you were wondering eleventy-plugin-console-plus uses utility.inspect under the hood which resolves circular references and allows you to print them. | dump I suspect uses JSON.stringify() which errors with circular references.

Sorry for taking so long to respond. I know that the error had something to do with references referencing themselves I was trying to find the root cause.

As you asked, I tried your plugin and to my surprise it returns every data about the website, not only the pages but data files, Eleventy configurations like filters and shortcodes that I have on my site, Eleventy functions, etc.

Not sure why though, even after having the eleventyNavigation filtering the collections I get this output:

Here is how I printed the data:

{# Specific parent #}
    {% set subNav = collections.all | eleventyNavigation("News") %}
    {% console subNav %}

{# Example on the Eleventy documentation #}
    {% set navigation = collections.all | eleventyNavigation %}
    {% console navigation %}

[dwkns]

Yeah this is expected. There is a ton of data held within collections. Far more than you usually need. Console-plus is just making it visibile.

I suspect holding all this data in collections is something to do with how Eleventy's internals work. It can be quite overwhelming when you view these types of objects. I'm working on some improvements to the console-plus plugin to make viewing complex objects simpler.

With the data you have left, even after filtering through the eleventyNavigation plugin, you'd be surprised how often some of those keys come in useful, especially as your site get more complex. It doesn't really matter that there is more information than you need.