javascript - JS `import` 未定义，可能是循环导入问题？

Question

前言

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

问题

TodoList === 未定义

代码

components/index.js

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

containers/index.js

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

components/App/App.js

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

容器/VisibleTodoList.js

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

组件/TodoList/TodoList.js

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

---

TodoList 现在是 undefined。我相信这可能与我遇到某种循环问题这一事实有关。

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

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

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

完整代码

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

https://codesandbox.io/s/m54nql1ky9

Answer 1

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

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';

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

完整的工作代码和框在这里:https://codesandbox.io/s/74mlwnwyy1