这是一个离子Angular 项目,我的工作,我正在使用ng-lazyload-image插件Link。当我开始编译它显示这样的错误。
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)
4条答案
按热度按时间55ooxyrt1#
这意味着你的bundler会解析.mjs文件,但是它不知道它们是ESM模块。在webpack上,你可以添加以下规则。
js(在项目根目录中)
https://webpack.js.org/configuration/
mfuanj7w2#
编辑:找到了craco.config.js的解决方案
67up9zun3#
@Joosep.P的答案是可行的,但是对于使用laravel和webpackmix的人来说,下面的方法是可行的。在webpack.mix.js文件中添加以下内容:
字符串
只是张贴它作为另一个答案,因为它可能会帮助别人或我找到解决方案与laravel和webpackmix容易在未来。谢谢。
vc6uscn94#
这可能与不同的Angular 版本有关。
如果ng-lazyload-image使用的是Angular 13,而你自己的项目使用的是一个较低的版本,就会发生这种情况。
如果ng-lazyload-image使用的是Angular 13,则没有为它的npm包生成es 2015文件,您的编译器仍在查找它们。
解决这个问题的一个方法是使用较低版本的ng-lazyload-image包,或者将您自己的Angular更新为Angular 13+