este es un proyecto angular iónico en el que estoy trabajando, estoy usando el complemento ng-lazyload-image Link . cuando empiezo a compilarlo mostrando errores como este.
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)Esto significa que su empaquetador resuelve archivos .mjs, sin embargo, no sabe que son módulos ESM. En webpack, puede agregar lo siguiente a las reglas.
webpack.config.js (en la raíz del proyecto)
module.exports = { configureWebpack: { module: { rules: [ { test: /\.mjs$/, include: /node_modules/, type: "javascript/auto" } ] } } }La respuesta de @ Joosep.P funciona, pero para alguien con laravel y webpackmix, el siguiente es el camino a seguir. En el archivo webpack.mix.js agregue lo siguiente:
mix.webpackConfig({ module: { rules: [ { test: /\.mjs$/, include: /node_modules/, type: "javascript/auto" } ] } });Simplemente publíquelo como otra respuesta, ya que puede ayudar a alguien más o a mí a encontrar la solución con laravel y webpackmix fácilmente en el futuro. Gracias.
Probablemente tenga que ver con diferentes versiones de Angular.
Si ng-lazyload-image usa Angular 13 y su propio proyecto usa una versión inferior, esto sucederá. Hay algunos cambios importantes desde Angular 13.
Si ng-lazyload-image está usando Angular 13, no hay archivos es2015 generados para su paquete npm y su compilador todavía los está buscando.
Una opción para solucionar esto sería usar una versión inferior del paquete ng-lazyload-image o actualizar su propio Angular a Angular 13+