Can't use variables in static tag (dynamic assets)

[alsolovyev]

Hi, first of all, I would like to thank you. Nice repo!
Is this a bug or am I doing something wrong?

Can't use variables in static tag (dynamic assets)

{% for image in images %}
  <img src="{% static image %}">
{% endfor %}

Error: Child compilation failed:
  Module build failed (from ../node_modules/simple-nunjucks-loader/lib/cjs/loader.js):
  Error: Asset "image" not found

or

{% for image in images %}
  <img src="{% static './' + image %}">
{% endfor %}

Error: Expected html to be a string but got null
  
  - index.js:417 HtmlWebpackPlugin.postProcessHtml
    [website]/[html-webpack-plugin]/index.js:417:29
  
  - index.js:247 
    [website]/[html-webpack-plugin]/index.js:247:25
  
  - task_queues.js:97 processTicksAndRejections
    internal/process/task_queues.js:97:5

Expected behavior

We have a list of images:

new HTMLWebpackPlugin({
    template: 'template.njk',
    templateParameters: {
        images: ['first.jpg', 'second.jpg', 'third.jpg']
    }
})

And I want to use them in the template:

{% for image in images %}
  <img src="{% static image %}">
{% endfor %}

Config

• Windows 10
• NodeJS - 12.16.3
• file-loader - 6.0.0
• nunjucks - 3.2.2
• simple-nunjucks-loader - 2.0.2

Plugin

new HTMLWebpackPlugin({
    template: 'template.njk',
    templateParameters: {
        images
    }
})

Loader

{
  test: /\.(njk|nunjucks|html)$/i,
  include: src,
  use: [
    'cache-loader',
    {
      loader: 'thread-loader',
      options: { workerParallelJobs: 100, poolRespawn: false, name: 'nunjucks' }
    },
    {
      loader: 'simple-nunjucks-loader',
      options: {
        searchPaths: ['src'],
        assetsPaths: ['src/images']
      }
    }
  ]
},
{
  test: /\.(png|jpe?g|gif)$/i,
  use: ['file-loader']
}

[ogonkov]

Thank you for filling a bug!

Does it work when static part got some string in it? Like

{% static 'asssets/' + image %}

[alsolovyev]

That was my second thought:

{% for image in images %}
  <img src="{% static './' + image %}">
{% endfor %}

Error: Expected html to be a string but got null

and tried to put images in a subfolder:

{% for image in ['first.jpg', 'second.jpg'] %}
  <img src="{% static 'images/' + image %}">
{% endfor %}

Error: Cannot find module './imagesfirst.jpg'

or

{% for image in ['/first.jpg', '/second.jpg'] %}
  <img src="{% static 'images/' + image %}">
{% endfor %}

Error: Cannot find module './images/first.jpg'

I can create a repository to reproduce this error if needed.

[ogonkov]

That weird. I will debug it after 19.00 (Moscow time)

Looks like there bugs in both AST parsing and StaticExtension.

Can you create repo to reproduce both cases?

[alsolovyev]

Can you create repo to reproduce both cases?

Of course, want to help as much as I can
https://github.com/alsolovyev/nunjucks-loader-error

[ogonkov]

I'm afraid loader lack of support for "dynamic-only" assets. I need to change assets output format and the way i examine that it is actually dynamic and not a static path. I guess i will make path on weekend.

I will fix a trailing slash problem for now (Cannot find module './imagesfirst.jpg'), i miss that case when write tests for assets.

[ogonkov]

My tests didn't catch trailing slash problem. Patch for problem is ready, but I should to reproduce it in tests first. I will continue with patch today, or on the weekend.

[alsolovyev]

Great job, thank you so much for such a quick response!

[ogonkov]

I will reopen this issue because i fix only one problem.