Can't import the named export 'Directive' from non EcmaScript module (only default export is available)

Question

this is a ionic angular project that i'm working on, i'm using ng-lazyload-image plugin Link. when i start compiling it showing errors like this.

Error: ./node_modules/ng-lazyload-image/fesm2015/ng-lazyload-image.mjs 401:10-19

Can't import the named export 'Directive' from non EcmaScript module (only default export is available)

Answer 1

This means your bundler resolves .mjs files, however it doesn't know that they are ESM modules. On webpack, you can add the following to rules.

webpack.config.js (in project root)

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        }
      ]
    }
  }
}

https://webpack.js.org/configuration/

Answer 2

The answer of @Joosep.P works, but for someone with laravel and webpackmix the following is the way to go. In webpack.mix.js file add the following:

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.mjs$/,
                include: /node_modules/,
                type: "javascript/auto"
            }
        ]
    }
});

Just posting it as another answer as it may help someone else or me to find the solution with laravel and webpackmix easily in the future. Thanks.