无法从非 EcmaScript 模块导入命名导出“指令”（仅提供默认导出）

Question

这是我正在开发的一个离子角度项目，我正在使用 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/