Trying to use static-tag with call() macro
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?
Can you create repo with a bug please?
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.
Which version of plugin and webpack you have @pkyeck ?
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 %}
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 %}.
No response. Fell free to reopen this issue, if you still got a problems.
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.