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