JS"导入"未定义，潜在的循环导入问题?

Question

前言

我正在使用create-react-app来生成应用程序。

问题

TodoList === undefined

法典

组件/索引.js

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

容器/索引.js

export { default as VisibleTodoList } from './VisibleTodoList.js';

组件/应用程序/应用程序.js

import { VisibleTodoList } from '../../containers/index.js';

容器/可见待办事项列表.js

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

组件/待办事项列表/待办事项列表.js

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

---

待办事项列表现已undefined。我相信这可能与我有某种循环问题有关。

问题是，如果在容器/VisibleTodoList中.js我使用以下方法导入，一切正常。

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

如果我尝试使用"中间人"(组件/索引.js文件导入，那么破坏导入的特殊之处是什么。

完整代码

我创建了一个 CodeSandbox，其中包含我的完整代码，因为它存在于我的应用程序中。该应用程序非常简单，但比我在这里概述的要复杂得多。

https://codesandbox.io/s/m54nql1ky9

Answer 1

该问题是由components/index.js文件中的导出顺序引起的。

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

由于App.js导入VisibleTodoList需要导入TodoList并将其传递给 reduxconnect函数，然后才能自行导出，因此最终会出现冲突。

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

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

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

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

完整的工作代码沙箱在这里：https://codesandbox.io/s/74mlwnwyy1