ogonkov / nunjucks-loader

Webpack loader for Nunjucks templates
https://ogonkov.github.io/nunjucks-loader/
MIT License
28 stars 7 forks source link

Trying to use static-tag with call() macro #94

Open pkyeck opened 3 years ago

pkyeck commented 3 years ago

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?

ogonkov commented 3 years ago

Can you create repo with a bug please?

ogonkov commented 3 years ago

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 commented 3 years ago

Which version of plugin and webpack you have @pkyeck ?

ogonkov commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

ogonkov commented 3 years ago

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.