Javascript JS'import'未定义，可能存在循环导入问题？

前言

我正在使用

create react app

生成一个应用程序

问题

TodoList==未定义

代码

组件/index.js

容器/index.js

组件/App/App.js

容器/VisibleTodoList.js

组件/TodoList/TodoList.js

---

TodoList现在未定义。我相信这可能与我有某种循环问题有关

问题是，如果我使用以下方法导入incider/VisibleTodoList.js，那么一切都正常

import TodoList from '../components/TodoList/TodoList.js';

如果我尝试使用“中间人”（components/index.js文件）进行导入，有什么特别之处会破坏导入

完整代码

我已经创建了一个包含完整代码的CodeSandbox，它位于我的应用程序中。这个应用程序非常简单，但比我在这里概述的要复杂

---

问题是由

组件/index.js

文件中的导出顺序引起的

export { default as App } from './App/App.js';
export { default as TodoList } from './TodoList/TodoList.js';

由于

App.js

导入

VisibleTodoList

，需要导入

TodoList

并将其传递给redux

connect

函数，然后才能导出自身，因此最终会出现冲突

我不确定这是否是babel的实现怪癖，或者这是否是ES导入规范定义的逻辑结果

在任何情况下，更改导出顺序都可以修复该错误

export { default as TodoList } from './TodoList/TodoList.js';
export { default as App } from './App/App.js';

根据经验，如果无法重构文件以避免导入循环，则应将外层组件放在列表的最后，因为它可能依赖于列表中较高位置的导入

---

完整的工作代码沙盒：

简单的示例似乎很好用。关于你的应用程序结构，你还能告诉我们什么吗？如果您在

组件/index.js

中导入默认的

应用程序

，它是否具有正确的值？您可以在导入时忽略

.js

。@andreemes从组件导入

应用程序

，效果与预期相同。此处的导入工作正常：@AlexMcCabe

导出自

顺序也是导入顺序。是的，如果你有循环依赖关系，导入顺序非常重要。我们花了一段时间才达到这一点，但考虑到这一点，这是非常合乎逻辑的。被接受为答案。另一种解决方法是根本不要将

/components/App/App

导入

/components/index

，只在一个地方使用它。

import { TodoList } from '../components/index.js';

export default function TodoList({ todos, onTodoClick }) { ... }

import TodoList from '../components/TodoList/TodoList.js';

export { default as App } from './App/App.js';
export { default as TodoList } from './TodoList/TodoList.js';

export { default as TodoList } from './TodoList/TodoList.js';
export { default as App } from './App/App.js';