Loading ES modules for filters/extensions results in error

[gijswijs]

If I follow the documentation and use the Filters option to load a filter:

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.njk$/,
                use: [{
                    loader: 'simple-nunjucks-loader',
                    options: {
                        filters: {
                            filter: path.join(__dirname, 'filter.js')
                        }
                    }
                }]
            }
        ]
    }
};

filter.js

export default function filter(val, param) {
    return `${val + param}`;
}

error

 [...]\filter.js:1
    (function (exports, require, module, __filename, __dirname) { export default function filter(val, param) {
                                                                  ^^^^^^

    SyntaxError: Unexpected token export

I am using simple-nunjucks-loader version 2.0.0

[ogonkov]

What is your node version?

Can you make repo to reproduce error?

[gijswijs]

Node version 10.15.1

I'll see if I can cook up a small repo.

[gijswijs]

@ogonkov I've made a small repo that reproduces the error.

https://github.com/gijswijs/simple-nunjucks-loader-test

I feel that it might be the combination of filters with the html-webpack-plugin that causes the issue, but that is just speculation.

[ogonkov]

Thank you, will look at this tomorrow

[gijswijs]

Just for clarification, the error happens during npm run build

Let me know if you need help. If you give some pointers, I could probably make a PR.

[ogonkov]

I see error, from the first look you need babel transpiration for filter module. I will return with more info today, I'm off the laptop for a whole day.

[gijswijs]

You are right.
I've changed the filter manually to:

module.exports = function filter(val, param) {
  return `${val + param}`;
}

And then it works.

Could we handle this more gracefully? Either via webpack config, or via some other means?

[ogonkov]

All filters in loader tests are es modules, so I think problem somewhere in config. I need to figure out what should be changed.

I didn't have a chance to sort it out yesterday, I will return with update today.

[ogonkov]

The problem is that filter is evaluated by nodejs first (without Webpack involved), that cause the error you see.

I'm afraid you can't use ES syntax in filters and extensions at that moment.
I will add loader ES sources to package to fix it for Node versions that could evaluate ES syntax (Node 13.9.0 and above). For versions of Node below 13.9.0 ES will be broken.

I will keep this issue open, and will investigate the ways to publish both ES and CommonJS versions.

[gijswijs]

I thought it was Node v13.2.0 that already supported ES syntax? Anyway, I can live with the workaround for now.

Once you publish a fix, I'll bump my Node version to >=13.9.0 (or 13.2.0)

[ogonkov]

Thank you for your patience.

Take a note, i'm just publish another loader update in 2.x trunk, with fix to built-in static tag.

[ogonkov]

I have added esm sources to package. But now webpack become problem, because it is trying to import loader itself as CommonJS, while it have .mjs extension and package marked as module. I will investigate it further tomorrow.

[ogonkov]

@gijswijs i'm afraid it is not yet possible with webpack to run loader as ES module

webpack/loader-runner@4f91458#r40487622

I will close this PR for now, but i will reopen it when ES support will come to webpack.

[gijswijs]

Thanks for all the effort you put in.