Failure when combining nunjucks-loader and file-loader.

[ghost]

Loader generated modules should respect the same design principles like normal modules.
Example: That’s a bad design: (not modular, global state, …)

require("any-template-language-loader!./xyz.atl");
var html = anyTemplateLanguage.render("xyz");

I tried to combine with file-loader, but is not working:

...
{
  test: /\.(nunj|nunjucks)$/,
  loader: 'file!nunjucks'
}
...

Reference: https://webpack.github.io/docs/how-to-write-a-loader.html#generate-modules-that-are-modular

[at0g]

I don't really get your use case for chaining file and nunjucks loaders together - can you explain what you're expecting to happen?

In regards to modular design that you've linked to, I don't see how this could be possible with nunjucks due to how template dependencies are resolved.

[at0g]

Hello @patrickporto Any feedback at all or just trollin`?

[ghost]

My expectation is that:

• Compile HTML with Nunjucks.
• Export file to output directory.

[bobbrez]

The title of the issue is a bit vague, but I'm looking at @patrickporto's same use case.

[ghost]

@at0g, I've changed and the title and the description as requested. Sorry about any misinterpretation. English is not my mother tongue.

[at0g]

@patrickporto thanks for cleaning up the title.
@bobbrez / @patrickporto - thanks for reporting your use case. I'm not convinced this functionality should be a part of this loader... let me think on it. There is an another way (using an intermediate file) that will do what you're after - I'll try to create an example or gist either tonight or tomorrow.

[bobbrez]

@at0g Thanks

[at0g]

There is an another way (using an intermediate file) that will do what you're after

Not as easy as I'd hoped for... I've burnt a few hours tonight trying to get an intermediate method to work and haven't got very far 👎

Probably won't get a chance to look at it again before next weekend... pretty sure this needs to be a separate project to make it work.

Can either (or both) of you post here with a bit more information about what you're trying to do... specifically with some info about how you'd like to pass data and configure nunjucks.

[dfdgsdfg]

Maybe nunjucks-html-loader can compile nunjucks to html.

Or static-site-generator-webpack-plugin?

[daslicht]

when using sass / fontawesome you need the file-loader as well

[at0g]

when using sass / fontawesome you need the file-loader as well

@daslicht
You can use other loaders within the nunjucks templates

[daslicht]

ahh so you pass a loader to nunjucks loader

[at0g]

it provides a require filter that hooks into webpack. Provided you have the loader configured, it will return whatever webpack resolves from the require statement.

eg.

# tpl.njk
{{ 'file!./relative-path/to/image.jpg' | require }} # outputs "/images/image.jpg"

{{ 'raw!hello-world.txt' | require }} # outputs "Hello world"

[vacchi]

im still getting a issue:
./src/templates/includes/header.njk
Module not found: Error: Can't resolve './images/image.png'

{{'file-loader!./images/image.png' | require}}
and on webpack:

{
          test: /\.(njk|nunjucks)$/,
          loader: 'nunjucks-loader'
      }

do you have any Ideas?

[at0g]

@vacchi I presume src/templates/includes/images/image.png does exist?
If the path is correct (eg. you still have this issue) can you please share a reproduction and I'll look into it.