ES6 模块导入未定义答案

【问题标题】：ES6 modules import is undefinedES6 模块导入未定义
【发布时间】：2018-03-18 00:21:06
【问题描述】：

我正在尝试找出我在导入 ES6 模块时遇到的问题。

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

我有 2 个 ReactJS 组件：

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

/index.js

我的文件如下所示：

我正在从根 index.js 文件导入 MyComponent2，这是我的包的入口点。

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

所以当我从根 index.js 文件中导入 MyComponent1 中的 MyComponent2 时，它是 undefined。当我从./MyComponent2.js 导入它时，它就被定义了。当我在另一个项目中导入整个包并从根index.js 文件中导入MyComponent2 时，它已定义。

令人兴奋，我不明白为什么我不能从根 index.js 文件中导入 MyComponent2。

我需要这样做，因为我有一组嵌套在不同文件夹中的数百个组件，我想让它们都可以从这个入口点文件中使用。

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

谢谢

【问题讨论】：

尝试简单导出：export default MyComponent1 导入：import MyComponent1 from './index'
我发现导入到 vars 然后单独导出工作。这种方式没有。

标签： javascript reactjs ecmascript-6

【解决方案1】：

在我的例子中，我有一个旧的js IDE 导入的文件，而不是更新的ts 文件。因此，如果您的模块文件是 module.js，请确保同一目录中没有已编译的旧 module.js

【讨论】：

【解决方案2】：

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

我已尝试使文件夹/模块结构与您所描述的相似。在继续阅读之前，请先查看文件夹/模块的结构。

当您在沙盒中运行代码时，请查看控制台。你会看到这样的东西 -

所以让我试着解释一下为什么你试图做的事情不起作用

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

注意components/index还没有被导出，所以会返回undefined

然后buttons/index被导出，接着是texts/index
然后buttons/MyComponent被渲染；就在它被渲染之前，我手动requirecomponents/index，它现在被定义了，所以返回一些定义的值

本质上，当您的MyComponent1 尝试通过index 文件导入MyComponent2 时，index 文件尚未导出，因此它返回未定义。要解决此问题，您必须在 MyComponent1 的渲染方法中 require MyComponent2。

【讨论】：

感谢您的详细解释。这真的很有帮助！虽然是从渲染方法导入的，但还是挺难看的哈哈！我愿意接受其他选择。

【解决方案3】：

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

import MyComponent1 from './buttons/index'

import MyComponent2 from './texts/index'

export {MyComponent1, MyComponent2}

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

import {MyComponent1} from 'index.js'

import {MyComponent2} from 'index.js'

【讨论】：