Error when using component in collection loop

[silveltman]

I get an error when I use a component within a loop of a collection. The same components works fine outside the loop.

Index.html

<main>

  {% bookshop "hero/base" title: 'My title' %}

  <section class="index-sloepen">
    {% for item in collections.sloepen %}
      {% bookshop "hero/base" title: 'My title' %}
    {% endfor %}
  </section>

</main>

Console output:

`RenderError` was thrown
> Converting circular structure to JSON
    --> starting at object with constructor 'EleventyExtensionMap'
    |     property '_engineManager' -> object with constructor 'TemplateEngineManager'
    |     property 'engineCache' -> object with constructor 'Object'
    |     property 'html' -> object with constructor 'Html'
    --- property '_extensionMap' closes the circle

I simplified it for this post, but eventually I want to pass data from my collection items to the component and render a component for each item in the collection.

I tried using a component in a frontmatter forloop, which works fine. When I loop over a collection it breaks.

[silveltman]

I found a temporary solution:

    {% assign sloep_count = collections.sloepen.size | minus: 1  %}
    {% for i in (0..sloep_count) %}
      {% bookshop "hero/base" bind: collections.sloepen[i].data %}
    {% endfor %}

It's a bit ugly though.. Please let me know if/how to fix it in a bit more elegant way! :)

[bglw]

Ah, I have an inkling on what could be causing this. I'm largely away this week, but I'll have a look soon! Definitely something that will be fixed on the Bookshop side.

[bglw]

Hello @silveltman 👋

This should be resolved finally in Bookshop 3.0 — ping me if it isn't and I'll reopen 🙏

[silveltman]

Hi, great update first of all!

As or this problem, it isn't resolved. Error:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] > Having trouble writing template: _site/aanbod/arrangementen/index.html

`TemplateWriterWriteError` was thrown
[11ty] > Invalid string length, file:./views/_layouts/aanbod.liquid, line:36, col:7

`RenderError` was thrown
[11ty] > Invalid string length

`RangeError` was thrown:
[11ty]     RangeError: Invalid string length
        at stringifySimple (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\safe-stable-stringify\index.js:574:55)
        at stringifySimple (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\safe-stable-stringify\index.js:572:23)
        at stringifySimple (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\safe-stable-stringify\index.js:572:23)
        at stringify (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\safe-stable-stringify\index.js:614:12)
        at contextHunt (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@bookshop\eleventy-bookshop\lib\eleventy-one-bookshop.js:23:13)
        at Object.render (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@bookshop\eleventy-bookshop\lib\eleventy-one-bookshop.js:76:47)
        at Tag.<anonymous> (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.node.cjs.js:4135:47)
        at step (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.node.cjs.js:87:23)
        at Object.next (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.node.cjs.js:68:53)
        at reduce (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.node.cjs.js:1056:25)
[11ty] Copied 112 files / Wrote 1 file in 46.46 seconds (v1.0.0)

[bglw]

Darn. I'll have another dig, that trace gives me a good idea of where it's happening, thanks 🙏

[silveltman]

This still does not work. After updating to eleventy 1.0 also my workaround does not work anymore. See below for simplefied recreation:

On page:

{% for item in collections.materialen %}
 {% bookshop 'card/text' bind: item.data %}
{% endfor %}

component:

<a {% if url.size > 0 %} href="{{ url }}" {% endif %} class="card-text">
  <h3 class="card-text__h">{{ title }}</h3>
  <p class="card-text__p">{{ description }}</p>
</a>

Error:

[11ty] File changed: src\debug.liquid

<--- Last few GCs --->

[3220:0000016A39F8A120]   111285 ms: Scavenge 2030.6 (2071.1) -> 2028.2 (2071.6) MB, 5.5 / 0.0 ms  (average mu = 0.186, current mu = 0.175) allocation failure 
[3220:0000016A39F8A120]   111297 ms: Scavenge 2031.1 (2071.6) -> 2029.0 (2072.4) MB, 6.4 / 0.0 ms  (average mu = 0.186, current mu = 0.175) allocation failure 
[3220:0000016A39F8A120]   111309 ms: Scavenge 2031.9 (2072.4) -> 2029.9 (2081.4) MB, 5.5 / 0.0 ms  (average mu = 0.186, current mu = 0.175) allocation failure 

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF669F6401F v8::internal::CodeObjectRegistry::~CodeObjectRegistry+112511
 2: 00007FF669EF3146 DSA_meth_get_flags+65542
 3: 00007FF669EF3FFD node::OnFatalError+301
 4: 00007FF66A825ADE v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF66A81000D v8::SharedArrayBuffer::Externalize+781
 6: 00007FF66A6B35FC v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1468
 7: 00007FF66A6C02A9 v8::internal::Heap::PublishPendingAllocations+1129
 8: 00007FF66A6BD27A v8::internal::Heap::PageFlagsAreConsistent+2842
 9: 00007FF66A6AFEF9 v8::internal::Heap::CollectGarbage+2137
10: 00007FF66A6B879B v8::internal::Heap::GlobalSizeOfObjects+331
11: 00007FF66A6FECCB v8::internal::StackGuard::HandleInterrupts+891
12: 00007FF66A4076D6 v8::internal::DateCache::Weekday+8630
13: 00007FF66A8B34B1 v8::internal::SetupIsolateDelegate::SetupHeap+494417
14: 0000016A3BF18FE0
ERROR: "eleventy:watch" exited with 134.

Can this pleaase get fixed. It makes it impossible to work with bookshop.

It really is a big problem, since the component workflow is most valuable when used inside loops.

[bglw]

Hi Sil 👋

Thanks for the reproduction — I'll look at getting a fix for this out ASAP, sorry for the delay.

[bglw]

Hi @silveltman 👋

Good news — I'm fairly confident that this is finally fixed. I couldn't replicate your latest JavaScript heap out of memory error, but I could replicate the initial circular structure issue.

I expect that everything you're hitting should now be fixed, as I was able to remove the problematic logic in its entirety (previously I was waiting for Eleventy to bump its liquidjs version to include my forloop patch)

You can update your repo to 3.1.2 by running npx @bookshop/up@latest and the original problem will (🤞) be fixed. I have added a new integration test for this case here: Bookshop live renders 11ty collection loop, so it won't crop up again.

Let me know if that fixes things!

[silveltman]

All works fine! Much love <3