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

We Are Going To Discuss About Can’t import the named export ‘Directive’ from non EcmaScript module (only default export is available). So lets Start this Angular Article.

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

How to solve Can’t import the named export ‘Directive’ from non EcmaScript module (only default export is available)

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/

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

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/

Solution 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/

Original Author Joosep Parts Of This Content

Solution 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.

Original Author Ashiq Of This Content

Solution 3

It probably has to do with different Angular versions.

If ng-lazyload-image is using Angular 13 and your own project is using a lower version this will happen. There are some breaking changes since Angular 13.

If ng-lazyload-image is using Angular 13 there are no es2015 files generated for it’s npm package and your compiler is still looking for them.

An option to solve this would be to use a lower version of the ng-lazyload-image package or update your own Angular to Angular 13+

Original Author Wolfyr Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment