Webpack 导入返回 undefined，取决于导入的顺序答案

【问题标题】：Webpack import returns undefined, depending on the order of importsWebpack 导入返回 undefined，取决于导入的顺序
【发布时间】：2016-05-16 09:47:39
【问题描述】：

我正在使用 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 而不是第一个版本中的模块？怎么了？

【问题讨论】：

标签： javascript webpack babeljs

【解决方案1】：

在缩小问题范围（又名拉扯头发）几乎整整一个工作日之后，我终于意识到我有一个循环依赖。

上面写着// some other imports here，A 导入另一个模块C，而后者又导入B。 A 首先在 main.js 中导入，因此 B 最终成为“圈”中的最后一个链接，而 Webpack（或任何类似 CommonJS 的环境，就此而言，如 Node）只是通过以下方式将其短路返回A 的module.exports，仍然是undefined。最终，它等于some-const，但B 中的同步代码最终会处理undefined。

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

编辑：最后一点，正如@cookie 所指出的，there's a plugin for circular dependency detection，如果您想避免[再次]遇到这个问题。

【讨论】：

有一个用于检测循环依赖的 webpack 插件：npmjs.com/package/circular-dependency-plugin
你是个了不起的英雄。 Webpack 就是这样一个垃圾箱大火——这简直炸毁了我的 vue.js 网站。事实证明，如果组件 X 导入 vuex 状态 Y + js 模块 Z，并且 Y 和 Z 都导入相同的 JSON FILE，不知何故构成了循环依赖。如果不是为了这个，永远不会修复它。
所以...如果 webpack 发出损坏的代码是因为它不支持循环依赖（我并不是说它应该支持糟糕的设计），那么我们为什么需要一个插件来告诉我们我们有问题吗？
@joonas.fi：我同意。 IMO 与 JS 生态系统通常归结为jwz.org/doc/worse-is-better.html

【解决方案2】：

这个plugin（上面指出）也为我解决了这个问题。

我建议设置此标志以避免将来添加额外的循环依赖。

// add errors to webpack instead of warnings
failOnError: true

还有一个 eslint plugin 来解决它。

【讨论】：