Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support Bookshop tags in Eleventy with no arguments, or multiple lines

See original GitHub issue

I’ve set up bookshop and made some components, all without problems. However, when I try to use a component on a page I get a “object null is not iterable” error. In the component browser it all works fine

index.liquid:

---
page_title: 'Hello World'
page_description:
---

<main>

  {% bookshop "cta" %}

  <section class="index-sloepen">
    {% for sloep in collections.sloepen %}
      {{sloep.title}}

      {%- comment -%}
        {% bookshop "card" 
        subtitle: sloep.data.subtitle
        title: sloep.data.title
        description: sloep.data.description

        afbeelding.image: sloep.data.galerij[1].image
        afbeelding.omschrijving: sloep.data.galerij[1].omschrijving
        title: sloep.data.title 

        button.primary.text: Huren
        button.primary.url: "/huren"
        button.secondary.text: Meer info
        button.secondary.url: sloep.url
        %}
      
      {%- endcomment -%}
    {% endfor %}
  </section>
</main>

The commented “button” component is what I eventually try to achieve, but I decided to test it with different (more simple) components too. Alays the same error… I also tried it without the commented section, so that’s not the problem.

DEBUG output:

Having trouble compiling template ./index.liquid: '\r\n' +
  Eleventy:TemplateContent   '<main>\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '  {% bookshop "cta" %}\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '  <section class="index-sloepen">\r\n' +
  Eleventy:TemplateContent   '    {% for sloep in collections.sloepen %}\r\n' +
  Eleventy:TemplateContent   '      {{sloep.title}}\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '      {%- comment -%}\r\n' +
  Eleventy:TemplateContent   '        {% bookshop "card" \r\n' +
  Eleventy:TemplateContent   '        subtitle: sloep.data.subtitle\r\n' +
  Eleventy:TemplateContent   '        title: sloep.data.title\r\n' +
  Eleventy:TemplateContent   '        description: sloep.data.description\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '        afbeelding.image: sloep.data.galerij[1].image\r\n' +
  Eleventy:TemplateContent   '        afbeelding.omschrijving: sloep.data.galerij[1].omschrijving\r\n' +
  Eleventy:TemplateContent   '        title: sloep.data.title \r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '        button.primary.text: Huren\r\n' +
  Eleventy:TemplateContent   '        button.primary.url: "/huren"\r\n' +
  Eleventy:TemplateContent   '        button.secondary.text: Meer info\r\n' +
  Eleventy:TemplateContent   '        button.secondary.url: sloep.url\r\n' +
  Eleventy:TemplateContent   '        %}\r\n' +
  Eleventy:TemplateContent   '      \r\n' +
  Eleventy:TemplateContent   '      {%- endcomment -%}\r\n' +
  Eleventy:TemplateContent   '    {% endfor %}\r\n' +
  Eleventy:TemplateContent   '  </section>\r\n' +
  Eleventy:TemplateContent   '</main>\r\n' +0ms
  Eleventy:TemplateContent Having trouble rendering liquid template ./index.liquid: '\r\n' +
  Eleventy:TemplateContent   '<main>\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '  {% bookshop "cta" %}\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '  <section class="index-sloepen">\r\n' +
  Eleventy:TemplateContent   '    {% for sloep in collections.sloepen %}\r\n' +
  Eleventy:TemplateContent   '      {{sloep.title}}\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '      {%- comment -%}\r\n' +
  Eleventy:TemplateContent   '        {% bookshop "card" \r\n' +
  Eleventy:TemplateContent   '        subtitle: sloep.data.subtitle\r\n' +
  Eleventy:TemplateContent   '        title: sloep.data.title\r\n' +
  Eleventy:TemplateContent   '        description: sloep.data.description\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '        afbeelding.image: sloep.data.galerij[1].image\r\n' +
  Eleventy:TemplateContent   '        afbeelding.omschrijving: sloep.data.galerij[1].omschrijving\r\n' +
  Eleventy:TemplateContent   '        title: sloep.data.title \r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '        button.primary.text: Huren\r\n' +
  Eleventy:TemplateContent   '        button.primary.url: "/huren"\r\n' +
  Eleventy:TemplateContent   '        button.secondary.text: Meer info\r\n' +
  Eleventy:TemplateContent   '        button.secondary.url: sloep.url\r\n' +
  Eleventy:TemplateContent   '        %}\r\n' +
  Eleventy:TemplateContent   '      \r\n' +
  Eleventy:TemplateContent   '      {%- endcomment -%}\r\n' +
  Eleventy:TemplateContent   '    {% endfor %}\r\n' +
  Eleventy:TemplateContent   '  </section>\r\n' +
  Eleventy:TemplateContent   '</main>\r\n' +10ms
  Eleventy:EleventyErrorHandler Problem writing Eleventy templates: +0ms
  Eleventy:EleventyErrorHandler Having trouble rendering liquid template ./index.liquid
  Eleventy:EleventyErrorHandler 
  Eleventy:EleventyErrorHandler `TemplateContentRenderError` was thrown +1ms
  Eleventy:EleventyErrorHandler (error stack): TemplateContentRenderError: Having trouble rendering liquid template ./index.liquid
  Eleventy:EleventyErrorHandler     at Template.render (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:215:15)
  Eleventy:EleventyErrorHandler     at async Template._getContent (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Template.js:547:12)
  Eleventy:EleventyErrorHandler     at async Template.getTemplateMapContent (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Template.js:732:19)
  Eleventy:EleventyErrorHandler     at async TemplateMap.populateContentDataInMap (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateMap.js:359:39)
  Eleventy:EleventyErrorHandler     at async TemplateMap.cache (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateMap.js:303:5)
  Eleventy:EleventyErrorHandler     at async TemplateWriter._createTemplateMap (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateWriter.js:170:5)
  Eleventy:EleventyErrorHandler     at async TemplateWriter.writeTemplates (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateWriter.js:203:5)
  Eleventy:EleventyErrorHandler     at async TemplateWriter.write (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateWriter.js:254:25)
  Eleventy:EleventyErrorHandler     at async Eleventy.write (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Eleventy.js:743:13) +2ms
  Eleventy:EleventyErrorHandler Having trouble compiling template ./index.liquid
  Eleventy:EleventyErrorHandler 
  Eleventy:EleventyErrorHandler `TemplateContentCompileError` was thrown +5ms
  Eleventy:EleventyErrorHandler (error stack): TemplateContentCompileError: Having trouble compiling template ./index.liquid
  Eleventy:EleventyErrorHandler     at Template.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:187:13)
  Eleventy:EleventyErrorHandler     at async Template.render (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:196:16)
  Eleventy:EleventyErrorHandler     at async Template._getContent (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Template.js:547:12)
  Eleventy:EleventyErrorHandler     at async Template.getTemplateMapContent (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Template.js:732:19)
  Eleventy:EleventyErrorHandler     at async TemplateMap.populateContentDataInMap (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateMap.js:359:39)
  Eleventy:EleventyErrorHandler     at async TemplateMap.cache (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateMap.js:303:5)
  Eleventy:EleventyErrorHandler     at async TemplateWriter._createTemplateMap (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateWriter.js:170:5)
  Eleventy:EleventyErrorHandler     at async TemplateWriter.writeTemplates (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateWriter.js:203:5)
  Eleventy:EleventyErrorHandler     at async TemplateWriter.write (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateWriter.js:254:25)
  Eleventy:EleventyErrorHandler     at async Eleventy.write (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Eleventy.js:743:13) +1ms
  Eleventy:EleventyErrorHandler object null is not iterable (cannot read property Symbol(Symbol.iterator)), file:./index.liquid, line:4
  Eleventy:EleventyErrorHandler 
  Eleventy:EleventyErrorHandler `ParseError` was thrown +8ms
  Eleventy:EleventyErrorHandler (error stack):    2| <main>
  Eleventy:EleventyErrorHandler    3|
  Eleventy:EleventyErrorHandler >> 4|   {% bookshop "cta" %}
  Eleventy:EleventyErrorHandler    5|
  Eleventy:EleventyErrorHandler    6|   <section class="index-sloepen">
  Eleventy:EleventyErrorHandler    7|     {% for sloep in collections.sloepen %}
  Eleventy:EleventyErrorHandler ParseError: object null is not iterable (cannot read property Symbol(Symbol.iterator)), file:./index.liquid, line:4        
  Eleventy:EleventyErrorHandler     at parseToken (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2031:13)       
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2012:22)     
  Eleventy:EleventyErrorHandler     at Object.parse$$1 [as parse] (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:3420:24)
  Eleventy:EleventyErrorHandler     at Liquid.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Engines\Liquid.js:199:29)
  Eleventy:EleventyErrorHandler     at TemplateRender.getCompiledTemplate (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateRender.js:212:26)
  Eleventy:EleventyErrorHandler     at Template.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:181:42)
  Eleventy:EleventyErrorHandler     at async Template.render (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:196:16)
  Eleventy:EleventyErrorHandler     at async Template._getContent (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Template.js:547:12)
  Eleventy:EleventyErrorHandler     at async Template.getTemplateMapContent (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Template.js:732:19)
  Eleventy:EleventyErrorHandler     at async TemplateMap.populateContentDataInMap (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateMap.js:359:39)
  Eleventy:EleventyErrorHandler From TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@bookshop\eleventy-bookshop\lib\eleventy-zero-bookshop.js:29:41)
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:1876:22)     
  Eleventy:EleventyErrorHandler     at Object.construct (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:1887:14) 
  Eleventy:EleventyErrorHandler     at parseTag (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2037:16)
  Eleventy:EleventyErrorHandler     at parseToken (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2021:15)       
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2012:22)     
  Eleventy:EleventyErrorHandler     at Object.parse$$1 [as parse] (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:3420:24)
  Eleventy:EleventyErrorHandler     at Liquid.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Engines\Liquid.js:199:29)
  Eleventy:EleventyErrorHandler     at TemplateRender.getCompiledTemplate (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateRender.js:212:26)
  Eleventy:EleventyErrorHandler     at Template.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:181:42) +1ms
  Eleventy:EleventyErrorHandler object null is not iterable (cannot read property Symbol(Symbol.iterator))
  Eleventy:EleventyErrorHandler 
  Eleventy:EleventyErrorHandler `TypeError` was thrown: +12ms
  Eleventy:EleventyErrorHandler (error stack): TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@bookshop\eleventy-bookshop\lib\eleventy-zero-bookshop.js:29:41)
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:1876:22)     
  Eleventy:EleventyErrorHandler     at Object.construct (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:1887:14) 
  Eleventy:EleventyErrorHandler     at parseTag (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2037:16)
  Eleventy:EleventyErrorHandler     at parseToken (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2021:15)       
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2012:22)     
  Eleventy:EleventyErrorHandler     at Object.parse$$1 [as parse] (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:3420:24)
  Eleventy:EleventyErrorHandler     at Liquid.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Engines\Liquid.js:199:29)
  Eleventy:EleventyErrorHandler     at TemplateRender.getCompiledTemplate (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateRender.js:212:26)
  Eleventy:EleventyErrorHandler     at Template.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:181:42) +2ms

cta.liquid:

<div class="cta">
  <img src="{{ afbeelding.image }}" alt="{{ afbeelding.omschrijving }}" class="cta__img">
  <div class="cta__content">
    <h1 class="cta__h">{{ title }}</h1>
    <a href="{{ button.url }}" class="cta__btn btn btn--primary">{{ button.text }}</a>
  </div>
</div>

cta.toml:

[component]
structures = []
label = "cta"
description = ""
icon = ""
tags = []

[props]
title = "Mijn titel"

[props.afbeelding]
image = "https://picsum.photos/1200/800?random=1"
omschrijving = "Omschrijving van mijn afbeelding"

[props.button]
text = "Button"
url = "#"

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
silveltmancommented, Jan 9, 2022

Once I got a bit more used to Bookshop it actually makes sense to me that the .toml is only used in the CMS. I think adding something like this would add less value than I initally though. When wanting a default value it’s probably better to hardcode that value in the component itself in most cases

1reaction
bglwcommented, Jan 2, 2022

Interesting — This as a bug, the tag would ideally support no arguments, as well as splitting onto multiple lines. I’ll reopen this and look at fixing it in the coming weeks 🙂

Read more comments on GitHub >

github_iconTop Results From Across the Web

bookshop/eleventy.adoc at main · CloudCannon ... - GitHub
Data Bindings; Live Editing Site Data and Collections; Passing Data to Bookshop Components; Eleventy Live Editing Support; Rendering Different Content When ...
Read more >
Editing with Eleventy Snippets | Articles | Documentation
Learn how to add and edit Snippets in the content of your Eleventy website ... named arguments; Eleventy Include; Eleventy Render; Eleventy Bookshop...
Read more >
Quick Tip #004—Zero Maintenance Tag Pages for your Blog
Our pagination template above will now generate two pages: /tags/personal/index.html and /tags/tech/index.html . The great thing here is that we don't have to ......
Read more >
Let's Talk Tropes: Morality Chain - The Smut Report
Morality Chain books we'll be reviewing this week Bottom line: Do you ... In that case, the trope might not be quite so...
Read more >
Hugo nested shortcodes - Caritas Castellaneta
Add support for Hugo syntax highlighting in JSON files; Acknowledgments. ... I created another shortcode as a proof-of-concept, not encompassing all ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Error when using component in collection loop

Next page

Bad classes in gomint