ES6 模块导入未定义

Question

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

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

我有 2 个 ReactJS 组件：

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

/index.js

我的文件看起来像这样：

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

我的组件1.js

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

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

我的组件2.js

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

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

按钮/ index.js

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

文本/ index.js

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

我的根index.js导出我所有的文件夹，使它们公开可用。 这是我的切入点：

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

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

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

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

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

谢谢

Answer 1

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

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

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

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

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

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

2. 然后导出buttons/index ，然后是texts/index

3. 然后呈现buttons/MyComponent ； 就在渲染之前，我手动require components/index ，并且现在已定义，因此返回一些已定义的值

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

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'

Answer 3

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