使用 ES6 时，如何在一个文件中未定义导入的函数，而不是在另一个文件中？答案

【问题标题】：When using ES6, how can an imported function be undefined in one file, and not in another?使用 ES6 时，如何在一个文件中未定义导入的函数，而不是在另一个文件中？
【发布时间】：2016-03-05 16:22:43
【问题描述】：

我正在使用带有 webpack 的 babel / ES6。我在两个不同的地方导入了相同的“动作”文件——它导出了一堆函数。它在一个地方返回一个模块，另一个undefined：

actions.js

export function test() { ... }
export function test2() { ... }

App.js

import actions from './actions'
class App extends React.Component { ... }
console.log(actions);         //<--------  Object{test:function,test2:function)
export default connect((state) => { ... },actions)(App);

编辑 App.js 工作的原因是因为它实际上使用了import * as actions，如下所示，我只是在示例中重新输入错误

NestedComponent.js

import actions from './actions'
class NestedComponent extends OtherComponent { ... }
console.log(actions);         //<--------  logs undefined
export default connect((state) => { ... },actions)(NestedComponent);

这与 webpack 定义模块/文件的顺序有关吗？

【问题讨论】：

您确定操作与 NestedComponent 位于同一目录中吗？
不，它实际上在我的设置中的嵌套文件夹中，但我已经仔细检查了路径，如果我更改它，编辑器和 babel 编译器都会抱怨（这意味着它很好）
@Felix King 是对的。由于您没有在操作文件中使用默认导出，因此您无法从中导入任何内容，除非您使用命名导入。

标签： reactjs ecmascript-6 webpack babeljs redux

【解决方案1】：

我遇到了类似的问题，由循环依赖引起。尝试从文件“B”导入文件“A”中的常量，而该常量又尝试从文件“A”导入。

【讨论】：

谢谢！这真的帮助了我。要查找循环依赖，请运行 npx madge --circular --extensions ts ./ 摘自这篇文章：medium.com/@andrejsabrickis/…

【解决方案2】：

发生这种情况的另一种常见情况是，如果您使用 Jest 进行测试并且启用了自动模拟行为。非常悲伤，这样的陷阱。

【讨论】：

【解决方案3】：

这在任何一种情况下都不起作用，因为您导入了错误的值。 import foo from '...' 导入模块的默认导出，但您没有默认导出，只有命名导出。

你应该使用的是

import {test, test2} from './actions';
// or
import * as actions from './actions';

【讨论】：

啊，是的，你是对的，这就是问题所在。我现在使用import * as actions from './actions'，效果很好。 tnx！