ES6模块导入未定义

Question

我试图找出与ES6模块导入有关的问题。

这是我正在尝试做的非常简化的版本。我当前的文件结构与嵌套文件夹相比要复杂得多。

我有2个ReactJS组件：

/buttons
  /MyComponent1.js
  /index.js
/texts
  /MyComponent2.js
  /index.js

/index.js

我的文件如下所示：

我MyComponent2要从根index.js文件导入它，这是我程序包的入口点。

MyComponent1.js

import MyComponent2 from '../../';

export default () => (
  <div><MyComponent2 /></div>
);

MyComponent2.js

export default () => (
  <div>Hello world</div>
);

我buttons/index.js和texts/index.js文件将所有组件导出到它们自己的文件夹中：

按钮/ index.js

export { default as MyComponent1 } from './MyComponent1';

texts / index.js

export { default as MyComponent2 } from './MyComponent2';

然后，我的根目录index.js导出所有文件夹，以使其公开可用。这是我的切入点：

export * from './buttons';
export * from './texts';

所以，当我输入MyComponent2在MyComponent1从根index.js文件，它的undefined。当我从导入时./MyComponent2.js，它已定义。当我将整个程序包导入另一个项目并MyComponent2从根index.js文件导入时，即已定义。

这太令人着迷了，我不明白为什么我不能MyComponent2从根index.js文件导入。

我需要这样做，因为我在不同的文件夹中嵌套了数百个组件，并且希望从该入口点文件中使它们全部可用。

有人可以告诉我发生了什么事以及如何使之成为可能吗？

谢谢

Answer 1

好吧，花了我一段时间才弄清楚发生了什么。请看看我设置的沙箱-https: //codesandbox.io/s/nk0qmo096j

我试图使文件夹/模块的结构与您所描述的相似。在继续阅读之前，请仔细阅读文件夹/模块的结构。

在沙盒中运行代码时，请查看控制台。您会看到类似这样的内容-

因此，让我尝试解释为什么您要执行的操作不起作用

buttons/MyComponent 是第一个要“导出”的文件（因为它位于依赖关系链的底部；项目/索引->组件/索引->按钮/索引->按钮/ MyComponent）

请注意，components/index尚未导出，因此它将返回未定义

然后buttons/index导出，然后是texts/index
然后buttons/MyComponent被渲染；就在我手动呈现它之前，require components/index现在已经定义了它，因此返回一些定义的值

本质上，当您MyComponent1尝试MyComponent2通过index文件导入时，该index文件尚未导出，因此返回未定义。要解决此问题，您必须require MyComponent2从MyComponent1的render方法中进行操作。

Answer 2

您可以从各个组件文件导入所有组件，然后将它们分配给根组件中的变量，然后将它们全部导出为对象。

import MyComponent1 from './buttons/index'

import MyComponent2 from './texts/index'

export {MyComponent1, MyComponent2}

将此组件导入另一个文件或项目中。您可以使用对象解构仅导入其中一个。

import {MyComponent1} from 'index.js'

import {MyComponent2} from 'index.js'