javascript - 无法从非 EcmaScript 模块导入命名导出 'Directive'(只有默认导出可用)

Question

这是我正在研究的一个 ionic 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)

Answer 1

这意味着您的捆绑器解析 .mjs 文件，但它不知道它们是 ESM 模块。在 webpack 上，您可以将以下内容添加到规则中。
webpack.config.js(在项目根目录中)

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

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