webpack import 返回 undefined，取决于导入的顺序

Question

我正在使用 webpack + babel。我有三个模块，如下所示：

 // A.js

// some other imports here
console.log('A');
export default 'some-const';

// B.js

import someConst from './A';
console.log('B', someConst);
export default 'something-else';

// main.js

import someConst from './A';
import somethingElse from './B';
console.log('main', someConst);

执行 main.js 时，我看到以下内容：

 B undefined
A
main some-const

如果我交换 main.js 中的进口， B 成为第一个，我得到：

 A
B some-const
main some-const

为什么 B.js 得到 undefined 而不是第一个版本中的模块？怎么了？

原文由 Alec Mev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

经过将近一整天的工作来缩小问题的范围（又名拉头发），我终于意识到我有一个循环依赖。

Where it says // some other imports here , A imports another module C , which, in turn, imports B . A 首先在 main.js 中导入，所以 B 最终成为“circle-like any 环境”中的最后一个链接，并且这很重要，就像 Node) 只是通过返回 A 的 module.exports 来短路它，它仍然是 undefined 。最终，它等于 some-const ，但 B 中的同步代码最终处理 undefined 。

消除循环依赖，通过移出 C 依赖于 B 的代码，解决了这个问题。希望 Webpack 能以某种方式警告我这一点。

编辑： 最后一点，正如@cookie 所指出的，如果您想避免[再次]遇到此问题，则 有一个用于循环依赖检测的插件。

原文由 Alec Mev 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在我的案例中，通过在 webpack 配置中将输出 libraryTarget 更改为 commonjs2 来解决问题：

   output: {
    path: `${__dirname}/dist`,
    filename: '[name].js',
    libraryTarget: 'commonjs2',
  },

原文由 Mohammad Seyfayi 发布，翻译遵循 CC BY-SA 4.0 许可协议