can't use eleventy-img plugin in component

[silveltman]

• no error when used outside component
• no error with hard-coded src and alt

Looks like the shortcode/plugin isn't able t use the default values from the .toml file.

toml:

[component]
structures = []
label = "hero-base"
description = ""
icon = ""
tags = []

[props]
description = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias mollitia ducimus facere?"

[props.title]
small = "Mijn mooie"
big = "grote titel"

[props.afbeelding]
image = "/assets/img/index-hero.jpg"
alt ="mijn alt"

liquid:

<section class="hero-base">
  {% image afbeelding.image, afbeelding.alt, "hero-base__img", "100vw", "600, 900, 1200, 1400, 1800" %}
  <div x-ref="content" class="hero-base__content">
    {% bookshop "title"  bind: title %}
    <p class="hero-base__p">{{ description }}</p>
  </div>
</section> 

Problem writing Eleventy templates: (more in DEBUG output)
> Having trouble rendering liquid template ./component-library/components/hero/base/base.eleventy.liquid

`TemplateContentRenderError` was thrown
> ENOENT: no such file or directory, stat '.undefined', file:./component-library/components/hero/base/base.eleventy.liquid, line:2

`RenderError` was thrown
> ENOENT: no such file or directory, stat '.undefined'

`Error` was thrown:
    Error: ENOENT: no such file or directory, stat '.undefined'
        at Object.statSync (node:fs:1536:3)
        at Image.getInMemoryCacheKey (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\@11ty\eleventy-img\img.js:139:32)
        at queueImage (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\@11ty\eleventy-img\img.js:565:15)
        at Object.imageShortcode (C:\Users\silve\11ty\vda-bouwmaterialen\.eleventy.js:16:24)
        at Object.<anonymous> (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\@11ty\eleventy\src\BenchmarkGroup.js:30:26)
        at Object.render (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\@11ty\eleventy\src\Engines\Liquid.js:147:25)
        at Object._callee$ (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\liquidjs\dist\liquid.common.js:1851:55)
        at tryCatch (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\liquidjs\dist\liquid.common.js:108:40)
        at Generator.invoke [as _invoke] (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\liquidjs\dist\liquid.common.js:319:22)
        at Generator.prototype.<computed> [as next] (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\liquidjs\dist\liquid.common.js:156:21)
Copied 26 files / Wrote 0 files in 0.27 seconds (v0.12.1)
Watching…
�📚 New components — no connected client
[Browsersync] Reloading Browsers...

[bglw]

👋

What data are you passing to the component?

Looks like the shortcode/plugin isn't able t use the default values from the .toml file

The values in the .toml file aren't accessible to the templates, they're only used to generate the CloudCannon Editing Structures.

[silveltman]

I'm passing in all kinds of data, depends on the page. The weird thing is that in a normal image tag the values are there, but in the sortcode they are undefinded

<section class="hero-base">

  <!-- Does NOT work -->
  {% image afbeelding.image, afbeelding.alt, "hero-base__img", "100vw", "600, 900, 1200, 1400, 1800" %}

  <!-- DOES work -->
  <img x-ref="img" src="{{ afbeelding.image }}" alt="{{ afbeelding.alt }}" class="hero-base__img">

  <div x-ref="content" class="hero-base__content">
    {% bookshop "title"  bind: title %}
    <p class="hero-base__p">{{ description }}</p>
  </div>
</section> 

I think the problem might be in the page for the component that is generated, since the error says Having trouble rendering liquid template ./component-library/components/hero/base/base.eleventy.liquid

file structure:

In that index.html file, there is no data supplied. Also not in the normal image.

I don't even know why all those components are generates as seperate pages in _site to be honest. in this normal behaviour? Is it neccesary for the component editor or something?

[silveltman]

Update:

I figured generating a page for each component doesn't add any value, so I created an 11ty input directory, with bookshop living outside of that. However, this lead to the following (new) problem:

When I update a component's markup, it is only updated in the component browser. I like this, because it forces me to finish the components before using them anywhere in my website. However, when using the eleventy-img plugin in a component now, the component is no longer visible in the browser. No warnings or anything. When I use the component in my website, it does work with the plugin.

so... I like that bookshop lives outside the 11ty-build, since it helps development. However, it doesn't allow me to use this plugin (or any other plugin, shortcode, filter etc I guess?) in the components.

Is there a solution for this I am not aware of? Thanks!

Repo: https://github.com/silveltman/11ty-starter

[bglw]

Hi @silveltman,

Apologies for the slow reply. You are correct that plugins are currently unsupported from within Bookshop components — the in-browser rendering doesn't use Eleventy directly so doesn't have access to any plugins you have defined there.

There is an undocumented way to add your own plugins to Bookshop's live editing environment, but it would require writing a new JavaScript file that implemented the behavior you're after. We sometimes use this for re-implementing a simple string transformation plugin.

In this case, I can't see a way that eleventy-img could be made to work in the browser, but you could add a plugin that performs some fallback behavior to prevent an error when Bookshop is rendering the component.

Let me know if this is something you're keen on and I'll write up a quick documentation section on adding these plugins :)

[bglw]

Hi @silveltman 👋

Wee update here. Plugins are still inaccessible from Bookshop components, but we do have a new feature where you can detect the environment from your template and render different content. You can see some docs on that here: Rendering Different Content When Live Editing

In this case, that would let you do something like the following:

{% if env_bookshop_live %}
  <img x-ref="img" src="{{ afbeelding.image }}" alt="{{ afbeelding.alt }}" class="hero-base__img">
{% else %}
  {% image afbeelding.image, afbeelding.alt, "hero-base__img", "100vw", "600, 900, 1200, 1400, 1800" %}
{% endif %}

You would still have a slight rendering difference between the component browser and the live site, but being aware of that might be enough.

Let me know your thoughts!

[fenderic]

Hey @bglw -

I have tried to use that solution of detecting the environment and it doesn't seem to fix the issue. None of my components are loading in the editor when a {% image %} tag is present - even when wrapped in a {% if env_bookshop_live %} check.

Chrome console is outputting the following warnings: Error rendering bookshop component page RenderError: tag "image" not found, file: ....... ...bookshop-live.js:5804 This is expected in certain cases, and may not be an issue, especially when deleting or re-ordering components. .... ...bookshop-live.js:5805

Any ideas?

Thanks!