nunjucks-loader icon indicating copy to clipboard operation
nunjucks-loader copied to clipboard

Trying to use static-tag with call() macro

Open pkyeck opened this issue 5 years ago • 7 comments

Describe the bug

I have a macro that is supposed to display an image.

<!-- _imagefullwidth.njk -->
{% macro ImageFullWidth(credits="") %}
<figure class="image--fullwidth">
  <div class="image--fullwidth--container">
    <div class="force-ratio force-ratio-16-9">
      {% if caller %}{{ caller() }}{% endif %}
    </div>
  </div>
  {% if credits != "" %}
    <div class="container-xl">
      <figcaption>{{ credits }}</figcaption>
    </div>
  {% endif %}
</figure>
{% endmacro %}

Because I don't want to use dynamic assets, I thought that I pass in the <img> tag using the static-tag via call(). This works for "normal" html-code like <p>test</p> without a problem.

<!-- index.njk -->
{% from "_imagefullwidth.njk" import ImageFullWidth with context %}

{% call ImageFullWidth() %}
  <p>test</p>
{% endcall %}

But using the static-tag throws an error.

<!-- index.njk -->
{% from "_imagefullwidth.njk" import ImageFullWidth with context %}

{% call ImageFullWidth() %}
  <img src="{% static 'images/maps-example.png' %}" alt="maps" />
{% endcall %}
ERROR in ./src/index.njk (./node_modules/html-webpack-plugin/lib/loader.js!./src/index.njk)
    Module build failed (from ./node_modules/simple-nunjucks-loader/lib/cjs/loader.js):
    Template render error: (test/src/index.njk)
      TypeError: Cannot read property 'value' of null
        at _prettifyError (/test/node_modules/nunjucks/src/lib.js:36:11)
        at _precompile (/test/node_modules/nunjucks/src/precompile.js:119:11)
        at Object.precompileString (/test/node_modules/nunjucks/src/precompile.js:37:19)
        at /test/node_modules/simple-nunjucks-loader/lib/cjs/precompile/local-var-precompile.js:23:45
        at new Promise (<anonymous>)
        at precompileToLocalVar (/test/node_modules/simple-nunjucks-loader/lib/cjs/precompile/local-var-precompile.js:21:10)
        at getDependencies (/test/node_modules/simple-nunjucks-loader/lib/cjs/precompile/get-dependencies.js:73:68)

Expected behavior I thought this would work ...

Do you have an idea why it is not working? Or what I could do to fix it?

pkyeck avatar Oct 13 '20 15:10 pkyeck

Can you create repo with a bug please?

ogonkov avatar Oct 13 '20 16:10 ogonkov

I've tried to reproduce this issue, but got a bit different error with latest loader version from master. Will try to dig it more.

ogonkov avatar Nov 14 '20 16:11 ogonkov

Which version of plugin and webpack you have @pkyeck ?

ogonkov avatar Nov 14 '20 16:11 ogonkov

As a temporary solution i suggest to export image to variable, and use it in your macros.

<!-- index.njk -->
{% from "_imagefullwidth.njk" import ImageFullWidth with context %}

{% static 'images/maps-example.png' as image %}

{% call ImageFullWidth() %}
  <img src="{{ image }}" alt="maps" />
{% endcall %}

ogonkov avatar Nov 14 '20 16:11 ogonkov

I can't reproduce your exact error, but found quite strange behaviour in nunjucks itself, that probably relate to your problem.

I have dig a bit nunjucks parser. It seems that it is parse StaticExtension as Output node, that cause adding it as filter (??). But since extensions didn't have name as filters do, it fails on node assertion in my case.

I'm not sure that custom async extensions could be properly used inside {% call %}.

ogonkov avatar Nov 14 '20 18:11 ogonkov

No response. Fell free to reopen this issue, if you still got a problems.

ogonkov avatar Nov 24 '20 06:11 ogonkov

I have dig this issue a bit. It looks like a nunjucks bug here (mozilla/nunjucks#1357). When nunjucks parse macro output, it "lift" filters from this output, and for some reason here is the conditional, that trying to treat async extensions (like built-in StaticExtension) as filters.

ogonkov avatar Jun 26 '21 08:06 ogonkov