ES6模块导入未定义

Question

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

这是我试图做的非常简化的版本。嵌套文件夹的当前文件结构要复杂得多。

我有2个ReactJS组件：

RTRIM(XMLAGG(XMLELEMENT(E,WARD_ID,',').EXTRACT('//text()') ORDER BY WARD_ID).GetClobVal(),',') AS wards

我的文件看起来像这样：

我从根/buttons /MyComponent1.js /index.js /texts /MyComponent2.js /index.js /index.js 文件中导入MyComponent2，这是我的软件包的入口点。

MyComponent1.js

index.js

MyComponent2.js

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

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

我的export default () => ( <div>Hello world</div> ); 和buttons/index.js个文件导出了自己文件夹中的所有组件：

按钮/ index.js

texts/index.js

文本/ index.js

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

我的根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。

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

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

由于

Answer 1

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

  

我试图保持文件夹/模块结构与您描述的类似。在继续阅读之前，请先了解文件夹/模块的结构。

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

因此，让我试着解释为什么你要做的事情不起作用

1. buttons/MyComponent是第一个被“导出”的文件（因为它位于依赖链的底部;项目/索引 - ＆gt; components / index - ＆gt; buttons / index - ＆gt; buttons / MyComponent）

  

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

1. 然后导出buttons/index，然后导出texts/index

2. 然后呈现buttons/MyComponent;就在我手动require components/index呈现之前，它现在被定义为返回一些定义的值

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

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'