Ionic 无法从非EcmaScript模块导入命名的导出“Directive”(仅默认导出可用)

2g32fytz  于 2022-12-16  发布在  Ionic
关注(0)|答案(4)|浏览(919)

这是一个离子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)
55ooxyrt

55ooxyrt1#

这意味着你的bundler会解析.mjs文件,但是它不知道它们是ESM模块。在webpack上,你可以添加以下规则。
js(在项目根目录中)

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

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

mfuanj7w

mfuanj7w2#

编辑:找到了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",
      })
    ],
  },
};
67up9zun

67up9zun3#

@Joosep.P的答案是可行的,但是对于使用laravel和webpackmix的人来说,下面的方法是可行的。在webpack.mix.js文件中添加以下内容:

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

字符串
只是张贴它作为另一个答案,因为它可能会帮助别人或我找到解决方案与laravel和webpackmix容易在未来。谢谢。

vc6uscn9

vc6uscn94#

这可能与不同的Angular 版本有关。
如果ng-lazyload-image使用的是Angular 13,而你自己的项目使用的是一个较低的版本,就会发生这种情况。
如果ng-lazyload-image使用的是Angular 13,则没有为它的npm包生成es 2015文件,您的编译器仍在查找它们。
解决这个问题的一个方法是使用较低版本的ng-lazyload-image包,或者将您自己的Angular更新为Angular 13+

相关问题