无法从非 EcmaScript 模块导入指定的导出"指令"(只有默认导出可用)

这是我正在进行的一个离子角度项目，我使用的是ng-lazylod图像插件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)

这意味着您的bundler解析.mjs文件，但它不知道它们是ESM模块。在webpack上，您可以将以下内容添加到规则中。

webpack.config.js(在项目根目录中(

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

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

@Joosep.p的答案是有效的，但对于拥有laravel和webpackmix的人来说，下面的方法是可行的。在webpack.mix.js文件中添加以下内容：

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

只是将其作为另一个答案发布，因为它可能会帮助其他人或我在未来轻松找到laravel和webpackmix的解决方案。谢谢

编辑：为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",
})
],
},
};

这可能与不同的Angular版本有关。

如果ng-lazylod图像使用的是Angular 13，而您自己的项目使用的是较低版本，则会发生这种情况。自Angular 13以来，出现了一些突破性的变化。

如果ng-lazylod图像使用Angular 13，则没有为其npm包生成es2015文件，编译器仍在寻找这些文件。

解决这个问题的一个选项是使用ng-lazylod图像包的较低版本，或者将您自己的Angular更新为Angular 13+

相关内容

最新更新

热门标签：