时间戳

首页 > 解决方案 > 当文件导入另一个命名导出时，ES6 动态导入失败

javascript - 当文件导入另一个命名导出时，ES6 动态导入失败

问题描述

我有一个名为a.js：

a.js：

import { set } from 'lodash';
import { myFunc } from '../helpers';

export default 'hello';

然后我将上面的文件（a.js）动态导入b.js：

const aFile = await import('a.js');

当我对上面的文件进行 webpack 时，我收到如下错误：Can't resolve 'fs', Can't resolve 'cldr', Can't resolve 'cldr/supplemental', Can't resolve 'cldr/event', Can't resolve 'cldr/supplemental', Can't resolve 'net', Can't resolve 'dns'.

但是当我删除import { myFunc } from '../helpers';froma.js时，webpack 运行得非常好。我肯定路径../helpers存在并且myFunc是../helpers文件中的命名导出。

为什么当我删除该行 webpack build pass 但否则它会失败？

标签： javascriptwebpack

解决方案

查看 helpers.js 文件是否正在导入 fs、cldr 等。尝试将 myFunc 从移动helpers.js到单独的文件中，看看是否可以解决问题。

如果这不能解决问题，请尝试target: 'node'在您的 wepback 配置中指定，如下所示：

target: 'node',
node: {
  fs: 'empty',
  net: 'empty',
  ...
  dns: 'empty',
}

target: 'node' 选项告诉 webpack 不要接触任何内置模块，如 fs 或 net。我不确定为什么，但添加'empty'字符串似乎也可以修复Can't resolve错误，具体取决于您的配置。

见这篇文章：https ://jlong​​ster.com/Backend-Apps-with-Webpack--Part-I 和github问题：https ://github.com/webpack-contrib/css-loader/issues/447#issuecomment- 285600188

我遇到了类似的问题，这似乎可以帮助我解决问题。Webpack 很棘手。

推荐阅读