CODEWITHSUNDEEP
javascriptangularionic-framework
Atiq Ur Rehman
Atiq Ur Rehman

Reputation: 1235

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

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)

Upvotes: 13

Views: 53667

Answers (4)

Yannick Laubscher
Yannick Laubscher

Reputation: 21

EDIT: Found a solution for craco.config.js

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
      });
      return webpackConfig;
    },
    
    plugins: [
      // Inject the "__DEV__" global variable.
      new webpack.DefinePlugin({
        __DEV__: process.env.NODE_ENV !== "production",
      })
    ],
  },
};

Upvotes: 2

Wolfyr
Wolfyr

Reputation: 479

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+

Upvotes: 0

Ashiq
Ashiq

Reputation: 855

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.

Upvotes: 3

Joosep Parts
Joosep Parts

Reputation: 6245

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/

Upvotes: 20

Related Questions