at0g / nunjucks-loader Goto Github PK

Is it possible to, instead of passing a path to a module that exports a function, pass the function directly to the query.config option?

I think it would be great to be able to do something like

....
{
  test: /\.html$/,
  loader: 'nunjucks',
  query: {
    config: function (env) { ... }
  },
}
...

How to import nunjucks templates using the es6 syntax , please?

eg this one : var tpl = require('./views/page.njk');

babel/babel-loader#166 (comment)

I've had to disable my translation calls in the templates until I can figure this out. Also bluebird polyfill can't be found.

'use strict';
// let locale = require('locale');
let locale = require.resolve('locale');

module.exports = function(env) {
  env.addGlobal('gettext', function(message) {
    return locale.gettext(message);
  });
  env.addGlobal('t', function(message) {
    return locale.gettext(message);
  });
  env.addGlobal('ngettext', function(msg1, msg2, n) {
    return locale.ngettext(msg1, msg2, n);
  });
  env.addGlobal('n', function(msg1, msg2, n) {
    return locale.ngettext(msg1, msg2, n);
  });
};

support flags in enviroment opts, such as autoescape, trimBlocks, tags https://mozilla.github.io/nunjucks/api.html#environment

When compiling node tests, webpack spits out warnings relating to dependencies of nunjucks.

Tests are failing and need to be updated

WARNING in ../~/nunjucks/~/chokidar/~/readdirp/~/minimatch/minimatch.js
Critical dependencies:
6:5-12 require function is used in a way in which dependencies cannot be statically extracted
 @ ../~/nunjucks/~/chokidar/~/readdirp/~/minimatch/minimatch.js 6:5-12

Template paths are stored in the shared nunjucks.webpackDependencies object as is, without being resolved, which may lead to the corresponding template references being overwritten as next templates are being pre-compiled. As a result, if multiple templates use the same string literal as a relative path in include, import, or extend tags, they all will end up referencing the same template after compilation (which one it will be depends on the order they are imported in the JS file).

Consider the following example:

The same directory structure as in this repo, with include.njk files added in the hero and villain dirs:

test/fixtures/templates/
├── ...
├── hero
|   ├── default.njk
│   └── include.njk
├── ...
└── villain
    ├── default.njk
    └── include.njk

Contents of these include.njk tempates:

{% include './default.njk' %}

(e.g. hero/default.njk and villain/default.njk respectively are meant to be included)

The expected results of rendering hero/include.njk and villain/include.njk would be I am a hero. and I am a villain. respectively, but in fact they are the same (either I am a hero. or I am a villain., depending on which template is imported first).

This mistake maybe happen on
https://github.com/mozilla/nunjucks/blob/master/browser/nunjucks-slim.js#L1340
can't work with 'use strict'.

I add ignore field on babelrc would fix this:

{
  ignore: ['node_modules/nunjucks/*']
}

Are there better ways to solve problems？

Anything help.

Thanks. :)

Disclaimer:
While I maintain this repo, I don't use nunjucks and have not done so for several years now. It does not suit my style of work, but I can appreciate that it may be good for others. If you would like to step up to become a maintainer of this package, contributing to this release would be the way to go.

I have started working on a 3.x 4.x version of this module, which can be seen here:
https://github.com/at0g/nunjucks-loader/tree/3x

Currently the new branch has a working example using html-webpack-plugin; along with a browser only version.

As of nunjucks@2, their packaging approach is literally hostile to UMD.
This makes it very difficult to support code that runs in the node environment (html-webpack-plugin, extract-text-plugin etc). Instead, I have opted for the following approach:

1. Precompile all of the template strings (almost environment agnostic) within the loader
2. Use the browser slim version in both browser and node environments

The caveat is this:

if (target === 'node') {
    // perform some messy crap to use the nunjucks precompiled loader in node. 
    const window = global.window || {};
    window.nunjucksPrecompiled = false;
    global.window = window;
}

My concern with doing this is that it's fairly common to branch other code based on typeof window !== 'undefined'.

I am unable to configure nunjucks-loader to use my app modules. I have a module called locale that does some fancy async downloading of the correct locale and I am unable to configure the loader to be able to access these in a global function.

Below the locale module is a custom one.

nunjucks.config.coffee

'use strict'

locale = require 'locale'

# I added this to see if node modules can be found
require 'path'

module.exports = (env) ->

  env.addGlobal 'gettext', (message) -> locale.gettext message
  env.addGlobal 't', (message) -> locale.gettext message
  env.addGlobal 'ngettext', (msg1, msg2, n) -> locale.ngettext msg1, msg2, n
  env.addGlobal 'n', (msg1, msg2, n) -> locale.ngettext msg1, msg2, n

  null

webpack.config.coffee

  resolveLoader:
    root: nodeModulesRoot
    modulesDirectories: [appModulesRoot, nodeModulesRoot, bowerRoot]

It is complaining with the following. 'jed' is a translation library in the bowerRoot.

ERROR in ../app/webpack/entries/app.site/partials/layout.nunj
Module build failed: Error: Cannot find module 'jed'

Actually, i want to achieve

njk file -> nunjucks-loader (with custom variables) -> html file

all of this happens in webpack config file.
the output of HTML files will be generated directly after webpack has compiled them.
but not the way you did in the entry.js, that jquery append the html string into the body tag.

A good example of the idea would be the ejs-loader: https://github.com/okonet/ejs-loader#options
which let the users to pass variables by defining it in query

I don't know how to achieve this, or it's not possible at present?

Thanks in advance!

Version 1.3 works fine but I cannot upgrade due to a blocker. I'll try to reproduce this in a script when I need a break from CSS.

 Template render error: (unknown path) [Line 4, Column 6]
  Template render error: (unknown path)
  Template render error: (unknown path)
  Error: Unable to call `tab`, which is undefined or falsey

Here is template.nunjucks:

{% include './tab' %}

<div>
{% for item in items %}
  {{ tab(item) }}
{% endfor %}
</div>

and tab.nunjucks

{% macro tab(item) %}
<a class="ctrl-modal ctrl-modal-icon ctrl-modal-icon-{{item.icon}}" href="https://url.com" title="{{item.label}}">
  {{item.label}}
</a>
{% endmacro %}

Hello,

You have recently released version 2.4.7 of nunjucks-loader. However, in that release you have incremented the version of your dependency loader-utils from ^0.2.12 to ^1.0.0. This is a breaking change, so your 2.4.7 release violates the rules of semantic versioning.

In effect, this broke the build of multiple projects we are maintaining, because loader-utils version 1.x no longer compiles under the version of node JS we are using. Please fix your release.

Hi!
Show how use nunjucks-loader with webpack2.

Hello @at0g,

I've been trying to use your loader for a project I'm working on. We are using nunjucks as the render engine combining it with Storybook to visualize the components in a nice way.

And we are having some issues with the SVG, I saw in previous issues that you suggested using the following to render SVG's but I always get [object Object] instead of the actual SVG inline.

  {{ 'svg-loader!./svg_to_render.svg' | require }}

Version used:
"nunjucks-loader": "^3.0.0"

• Do you have any idea why this is happening?

Thank you so much for the nice loader and keep up with the good work 👏

Feels like I'm missing something obvious here, but I can't get {% include %} to work. I tried it in the paths-examples directory:

I added a 'test.nunj' file under path/to/templates with contents like

blah

Then in path/to/templates/child.nunj, I added the {% include %} like so:

{% block content %}
<div style="background-color: #ffff00; padding: 1em;">
    <pre><code>path/to/templates/child.nunj</code></pre>
    <h2>Child message: {{ message | default('(none)') }}</h2>
</div>

{% include 'test.nunj' %}

{% endblock %}

Webpack bundles everything fine, but when I hit the page I get an error in the console:

Uncaught Template render error: (unknown path)
Template render error: Template render error: TypeError: Cannot read property 'render' of undefined

Any ideas? Also, just fyi, npm run test all pass for me. Thanks in advance.

I have Webpack set up to require template files using 'tmpl' as a loader name (require('tmpl!/path/to/template/file')). However, I would like to be able to include template files from within another template file using just the filename, like the following:

<div class="content">
    {% include 'content.html' %}
</div>

At present, Webpack fails at the include line with the error:

You may need an appropriate loader to handle this file type.

It seems to me that the only use-case for the include tag is to include an HTML file, not arbitrary JavaScript (or other formats supported by Webpack). Therefore, the include tag (and other similar tags such as extends) should go straight to the nunjucks loader.

Hi again. Happy to see this is still getting updated.

Our team wants to share the same templates we're using in our JS in another project. That way, we don't have to duplicate any of our nunjucks code. It is a Java app and we were planning on using Nashorn to read in our nunjucks-related JS into its Java code and expose nunjucks so we can do something like nunjucks.render('path/to/template-name.nunj') within its rendering pipeline.

I ran into a couple of things:

1. In index.js (https://github.com/at0g/nunjucks-loader/blob/master/index.js#L64), I see you're substituting window.nunjucksPrecompiled with nunjucks.nunjucksPrecompiled. Why not keep window.nunjucksPrecompiled so nunjucks knows we have precompiled templates available if nunjucks.render() is used outside the bundle?

2. For the name key used in nunjucks.nunjucksPrecompiled (https://github.com/at0g/nunjucks-loader/blob/master/index.js#L129), it uses only the name of the nunjucks file and doesn't include the path before it, which can lead to name collisions (so the same name would be used for templates/hero/default.nunj and templates/button/default.nunj). Am I missing a configuration setting? I think I need to properly set the this.context value being used here: https://github.com/at0g/nunjucks-loader/blob/master/index.js#L57.

I can submit a pull request for these, but based on what we're planning to do with nunjucks, I wanted to see whether that's the right approach. Or do you recommend doing something else instead? I could just generate another file with all the precompiled templates on window.nunjucksPrecompiled, but it feels like I'm unnecessarily processing our templates twice.

Thanks!

can we get a webpack 4.x release for npm please? - #62

I follow the readme and when I try to paste the example in filters and extensions it gives me the error
and i have the file in the right place

Module not found: Error: Can't resolve 'nunjucks.config.js'

Any ideias,
Best Hélio

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

Hi,

I've got problem rendering template with nunjucks-loader.

{% macro Slider(slides) -%}
<div class="Slider">
    {% if slides|length %}
        <div class="Slider-contents">
            {% for s in slides %}
                <div class="Slider-slide" data-order="{{ loop.index }}">
                    <div class="Frame Frame--simple"></div>

                    <a class="Slider-link u-Heading" href="">
                    <span class="Slider-linkContents">
                        <span class="Slider-titleContainer">
                            <span class="Slider-title">{{ s.title|safe }}</span>
                        </span>
                        <span class="Slider-linkMessage">Подробнее</span>
                    </span>
                    </a>

                    <div class="Slider-overlay"></div>

                    <img src="{{ s.img.main }}" srcset="{{ s.img.main_2x }} 2x" alt="{{ s.title }}"
                         class="Slider-img">
                </div>
            {% endfor %}
        </div>

        <div class="Slider-counter">
        <span class="Slider-currentCounter">
            <span class="Slider-numberValue">01</span>
        </span>
            <span>of</span>
            <span class="Slider-numberTotal">{{ '%02d' % loop.length }}</span>
        </div>

        <button class="Slider-btn Slider-btn--prev u-Btn">
            {% include 'front/components/Slider/Slider-prev.svg' %}
        </button>

        <button class="Slider-btn Slider-btn--next u-Btn">
            {% include 'front/components/Slider/Slider-next.svg' %}
        </button>
    {% endif %}
</div>{{ caller() }}
{%- endmacro %}

This macro is rendered inside another template

{%- import 'front/components/Slider/Slider.jinja' as Slider -%}

<div class="IndexPage">
    {% call Slider.Slider(projects) %}{% endcall %}

    {% include 'front/components/Footer/Footer.jinja' %}
</div>

I've got error in browser console:

Uncaught (in promise) Error: (unknown path) [Line 3, Column 23]
RangeError: Maximum call stack size exceeded
at Object.exports.withPrettyErrors (http://127.0.0.1:8000/static/js/front/app.js:1962:18)
at Obj.extend.render (http://127.0.0.1:8000/static/js/front/app.js:3565:21)
at render (http://127.0.0.1:8000/static/js/front/app.js:1369:38)
at http://127.0.0.1:8000/static/js/front/app.js:1351:24

If I remove includes:
{% include 'front/components/Slider/Slider-next.svg' %}
{% include 'front/components/Slider/Slider-prev.svg' %}
Everything compiles fine

My webpack config:
https://gist.github.com/Walkeryr/44783b973b6b6a27980e

Maybe this issue is connected with this one (similar in browserify):
mozilla/nunjucks#492

I need a small help here, take a look below to the error I am getting when execute:

ERROR in ./src/views/index.njk
Module build failed: TypeError: Cannot read property 'context' of undefined
    at Object.module.exports (/secret/example/node_modules/nunjucks-loader/index.js:76:57)
 @ ./src/entry.js 1:0-28

Take a look at this example here: https://github.com/brunowego/nunjucks-webpack-example

Changes were introduced in 34ba789, but options are not being passed to browser environment. I think it has to do with hasRun variable which returns undefined in every other pass of using loader inside module consumed via Webpack. Maybe envOpts should be propagated to top scope?

If you pass custom autoescape value to opts object, it still defaults to true in browser environment. I think it’s related to this browser environment codepath.

If you create custom config file and change value there, it is applied in browser environment, but this seems like unecessary step.

Is there any reason why browser environment couldn’t also use passed options?

I also think this is somewhat related to issue #54.

for webpack2 i have the following config;

      {
        // nunjucks template loader.
        test: /\.html$/, use: [{
          loader: 'nunjucks-loader',
          query: {
            opts: {
              autoescape: true, // escape dangerous characters.
              trimBlocks: true, // automatically remove trailing newlines from a block/tag
              lstripBlocks: true, // automatically remove leading whitespace from a block/tag
              web: {
                useCache: true // will enable cache and templates will never see updates.
              }
            },
            config: __dirname + '/assets/js/common/nunjucks.config.js'
          },
        }]
      },

my nunjucks.config.js;

const moment = require('moment/min/moment-with-locales.min.js');

module.exports = function (env) {
  // add moment to client side nunjucks too.
  env.addGlobal('moment', moment); // eslint-disable-line no-undef

  console.dir(env);
}

and i see on browser that these settings are not applied to env;

opts:
autoescape:true
dev:false
lstripBlocks:false
throwOnUndefined:false
trimBlocks:false

any ideas?

I have tried to include a macro into my app with no luck.

I am not sure if this is something missing from Nunjucks' API (report) or from the loader.

e.g.

{# macro.njk #}
{% macro toggler(controlsId, expanded = true, attributes = {}, innerHTML = "") %}
  {# make this a button #}
  <a href="#"
    role="button"
    {% for attr, val in attributes %}
      {{attr}}="{{val}}"
    {% endfor %}
    data-component="show-hide"
    aria-controls="{{controlsId}}"
    aria-expanded="{{expanded}}">
    {{innerHTML | safe}}
  </a>
{% endmacro %}

// app.js
import template from './location/to/macro/macro.njk';

// Not sure what the syntax is here, I've dug around and can't fund anything.
const rendered = template.toggler.render({ expanded: true, controlsId: 'nav' });
console.log(rendered);

Since in [email protected], nunjucks no longer global.

Why this doesn't work for target=node? It's a design problem or intended? I would like to use 2.x with node :(

Hey,

I tried and failed a while ago to get Nunjucks working in Vue via this package:

https://forum.vuejs.org/t/getting-nunjucks-templates-loading-with-vue-vue-loader/27944

Just posting here as I'd love to pick this up again. My apologies I'm unable to provide much info, I guess I'm really just hoping to get a bit of a walkthrough.

Thanks,
Dave

EDIT: Related issue: https://forum.vuejs.org/t/reusable-templates-possible-or-feature/21494/42

Hello,

I'm using the nunjucks-loader and I've got this strange error on the path of node_module (the second part)

ERROR in ./Resources/public/templates/_briefList.nunjucks.nunj
Module not found: Error: Cannot resolve 'file' or 'directory' .\Resources\public\js\src\vendors\nunjucks.js/browser/nunjucks-slim in .\Resources\public\templates
@ ./Resources/public/templates/_briefList.nunjucks.nunj 1:15-73

ERROR in ./Resources/public/templates/_briefList.nunjucks.nunj
Module not found: Error: Cannot resolve module 'D:devpmplanningserver
ode_modules
untime-shim' in .\Resources\public\templates
@ ./Resources/public/templates/_briefList.nunjucks.nunj 13:11-89

Is it a problem because of windows?

node 4.1.1
Webpack 1.12.2
nunjucks 2.1.0
nunjucks-loader 2.2.1

Thanks for helping me understanding that!

Include .njk extension in loader list.

My bad, I missred my image url. Sorry for that, issue is definitely closed.

Hi,

I'll try to include or import njk template from an another template with variables like that :

{% for strate in contents.common[current].strates %}
     <div class="tabs-markets--content">
        {% for i in range(1, 5) -%}
        <div class="tabs-markets--strate">
            {%  include strate %}
        </div>
        {%- endfor %}
    </div>
{% endfor %}

where strate return a string like path/to/file.njk

But I have an error :

ERROR in Template render error: (unknown path)
Template render error: (unknown path)

Without a variable, path (and include) works .. So it's not a path problem.

I think it is related to Webpack's dynamic requirements (https://webpack.github.io/docs/context.html)

Did you or does someone has an idea to make this possible ?

Thank's for help.

Hey.

I landed here searching how I could inject my frontend build to a script tag inside a nunjucks template.

I'm building a plain, backend, express application using nunjucks templates, along with a webpack frontend javascript build.

I'm manually injecting webpack outputs to my templates with plain old <script> tags

Is this the place to be ?

Html-Webpack-Plugin is just a index.html compiler.

It can use with template like below.

module: {
  loaders: [
    { test: /\.hbs$/, loader: "handlebars" }
  ]
},
plugins: [
  new HtmlWebpackPlugin({
    title: 'Custom template using Handlebars',
    template: 'my-index.hbs'
  })
]

If I try with nunjucks-loader, I've got [nunjucks-loader] non-web targets are not supported.

What about support it? 😃

My tpl file content are:

{% for item in items %}
<li data-index="{{ loop.index }}">{{ item }}</li>
{% endfor %}

It's transformed to:

module.exports = "{% for item in items %}\n<li data-index=\"{{ loop.index }}\">{{ item }}</li>\n{% endfor %}\n";

Module build failed: TypeError: loaderUtils.getOptions is not a function

Per @oh-ren's comment on #48, loader-utils needs to be updated to 1.0.0 or higher.

webpack run, bundle.js use in index.html

error:
Uncaught TypeError: Cannot read property 'MutationObserver' of undefined

error code:
var BrowserMutationObserver = global.MutationObserver || global.WebKitMutationObserver;

A breaking change to the getTemplate API was introduced in Nunjucks v2.2.0 - the 4th parameter is now ignoreMissing.

mozilla/nunjucks@6a628ae

I would like to be able to extract the rendered templates to static HTML files which can be passed to a backend developer to be integrated with the CMS.

Is this possible?

ERROR in ./njk/hello.njk
Module build failed: ReferenceError: window is not defined
    at new_cls.init (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/nunjucks-loader/index.js!/Users/craigmorris/Dev/webpack-nunjucks-t
est/njk/hello.njk:645:23)
    at new new_cls (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/nunjucks-loader/index.js!/Users/craigmorris/Dev/webpack-nunjucks-te
st/njk/hello.njk:1528:29)
    at Object.<anonymous> (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/nunjucks-loader/index.js!/Users/craigmorris/Dev/webpack-nunj
ucks-test/njk/hello.njk:3114:30)
    at __webpack_require__ (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/nunjucks-loader/index.js!/Users/craigmorris/Dev/webpack-nun
jucks-test/njk/hello.njk:21:30)
    at module.exports.module.exports.oldRoot (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/nunjucks-loader/index.js!/Users/craigmorr
is/Dev/webpack-nunjucks-test/njk/hello.njk:67:18)
    at Object.<anonymous> (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/nunjucks-loader/index.js!/Users/craigmorris/Dev/webpack-nunj
ucks-test/njk/hello.njk:70:10)
    at Module._compile (module.js:571:32)
    at Object.exec (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/webpack/lib/NormalModule.js:126:12)
    at Object.<anonymous> (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/extract-text-webpack-plugin/loader.js:112:21)
    at Compiler.<anonymous> (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/webpack/lib/Compiler.js:296:10)
    at /Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/webpack/lib/Compiler.js:499:13
    at next (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/tapable/lib/Tapable.js:138:11)
    at Compiler.<anonymous> (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/extract-text-webpack-plugin/loader.js:93:4)
    at next (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/tapable/lib/Tapable.js:140:14)
    at Compiler.<anonymous> (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/webpack/lib/CachePlugin.js:62:5)
    at Compiler.applyPluginsAsyncSeries (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/tapable/lib/Tapable.js:142:13)
    at /Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/webpack/lib/Compiler.js:496:10
    at Compilation.applyPluginsAsyncSeries (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/tapable/lib/Tapable.js:131:46)
    at self.applyPluginsAsync.err (/Users/craigmorris/Dev/webpack-nunjucks-test/node_modules/webpack/lib/Compilation.js:649:19)

Here is my nunjucks config:

    }, {
      test: /\.nunjucks$/,
      loader: "nunjucks",
      query: {
        config: `${devRoot}/nunjucks.config.js`
      }
    }, {

I don't get this error with nunjucks-loader 2.1

ERROR in ../app/webpack/entries/app.site/screens/detail/common/body.nunjucks
Module not found: Error: Cannot resolve 'file' or 'directory' ../../dev/nunjucks.config.js in /opt/secretprojectname/org/master/app/webpack/entries/app.site/screens/detail/common
 @ ../app/webpack/entries/app.site/screens/detail/common/body.nunjucks 8:16-55

folders

templates/
     -----parent.html
     -----children.html
     -----test.js

children.html

   {% extends './parent.html'  %}    or  {% extends  parentTpl %}

then

   let childTpl =  children.render()   //  it works 
   // another way  store the file path in a variable  it doesn`t work
   let childTpl =  children.render({  parentTpl : './parent.html' })  

It doesn`t support the dynamicly extends?

Hi,
does nunjucks-loader work with nunjucks@^3 ?

I'm using https://github.com/webpack/webpack-dev-middleware, and have the nunjucks-loader configured in our webpack config.

When a change is made to the a template (or the js file including it), our middleware says it updates, but the resulting nunjucks output doesn't update.

I've tried the noCache (nunjucks.configure) option, which no luck:

        loaders: [
            {
                test: /\.(nunj|nunjucks)$/,
                loader: 'nunjucks-loader',
                query: {
                    noCache: true
                }
            }
        ]

Any ideas?

I ran into a problem: my nunjucks.config.js depends on es6 module. I think it'd be nice to pass config file through webpack loaders before execution.

The following quick getter test works with nunjucks 2 and proves that it does know how to use the getters:

'use strict';
let nunjucks = require('nunjucks');

let html;

let o1 = {
  _value: 'abc',
  get value() {
    return this._value;
  }
}
// Ouputs 'abc'
console.log(o1.value);
html = nunjucks.renderString('{{o.value}}', {o: o1});
// Ouputs 'abc'
console.log(html);

let O2 = function() {
  this._value = 'abc';
  Object.defineProperty(this, 'value', {
    get: function() { return this._value }
  });
}
let o2 = new O2();
html = nunjucks.renderString('{{o.value}}', {o: o2});
// Ouputs 'abc'
console.log(html);

Something is wrong with either ampersand-view or ampersand-state because the following template doesn't work with nunjucks 2 but does work with nunjucks 1:

{{ model.type }}

but the following does work:

{{ _values['model']['_values']['type'] }}

Above I determined that nunjucks@2.* works with getters and now it is coming down to either ampersand-state, ampersand-viewor the webpack loadernunjucks-loader@2.*`. nunjucks-loader is just passing in the context so I don't see how that could be an issue.

I'm using a Backbone fork called Ampersand and it passed in the model object (not a POJO) and it is trying to access the getter that is defined in the prototype with model["get"] instead of model.get. This is a change of behavior from nunjucks-loader 1.3 and I'm not sure if there is a work around other than converting all models to POJO.

Is this how nunjucks 2.* behavior change?

nunjucks-loader config

loaders: [
  {
    test: /\.(njk|nunjucks)$/,
    loader: 'nunjucks',
    query: {
      config: path.resolve(__dirname, 'njk/config.js')
    }
  }
]

njk\config.js

module.exports = function(env) {
  env.addFilter('star', function(num) {
    var html = '';
    for (var i=0; i<num; i++) {html += '<i></i>';}
    return html;
  });
};

there is not error throw when webpack compile, but my web is broken by nunjucks.
when i remove nunjucks-loader config, everything is ok.

I download nunjucks-loader repo and run npm test, it's also failure.

env: win7/nodejs 6.6.0/webpack 1.13.2

Update: It's because I use https://github.com/survivejs/webpack-merge, not cause by nunjucks-loader.