ES6モジュールのインポートが定義されていません

Question

ES6モジュールのインポートに関する問題を解明しようとしています。

これは私がしようとしているものの非常に単純化されたバージョンです。私の現在のファイル構造は、ネストされたフォルダでははるかに複雑です。

私は2つのReactJSコンポーネントがあります。

私は私のパッケージのエントリポイントであるルートindex.jsファイルからMyComponent2をインポートしています：

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

/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ファイルは、自分のフォルダ内のすべてのコンポーネントをエクスポートします。

ボタン/インデックス。 js

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

テキスト/ index.js

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

そして、私のルートindex.js輸出すべての私のフォルダにそれらを公開にします。私はルートindex.jsファイルからMyComponent1にMyComponent2をインポートするとき

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

だから、それはundefinedだ：それは私のエントリポイントです。 ./MyComponent2.jsからインポートすると、定義されます。パッケージ全体を別のプロジェクトにインポートし、MyComponent2をルートindex.jsファイルからインポートすると、定義されます。

MyComponent2をルートindex.jsファイルからインポートできない理由がわかりません。

私は何百ものコンポーネントを別々のフォルダにネストしているので、このエントリポイントファイルからすべてのコンポーネントを利用できるようにしたいので、これを行う必要があります。

何が起こっているのか、誰に教えてもらえますか？

おかげ

Answer 1

あなたは、それぞれのコンポーネントファイルからすべてのコンポーネントをインポートして、ルート・コンポーネント内の変数に割り当てた後、オブジェクトとしてそれらのすべてをエクスポートすることができます。

import MyComponent1 from './buttons/index'

import MyComponent2 from './texts/index'

export {MyComponent1, MyComponent2}

別のファイルまたはプロジェクトにこのコンポーネントをインポートします。オブジェクトの構造化を使用して1つだけインポートすることができます。

import {MyComponent1} from 'index.js'

import {MyComponent2} from 'index.js'

Answer 2

わかりましたが、何が起こっているかを把握するために私にしばらく時間がかかりました。私がセットアップしたサンドボックスを見てください - https://codesandbox.io/s/nk0qmo096j

私は、あなたが説明したものと同様のフォルダ/モジュール構造を保つようにしました。あなたが読み続ける前に、フォルダ/モジュールがどのように構造化されているかを見てください。

サンドボックスでコードを実行するときは、コンソールを見てください。だから、私はあなたが何をしようとしていること

1. buttons/MyComponentが動作していない理由を説明してみましょうすると、「エクスポート」される最初のファイルである

   

   - あなたはこのようなものが表示されます（その依存関係の連鎖の底にので、プロジェクト/索引 - >コンポーネント/索引 - >ボタン/インデックス - >ボタン/ MyComponentの）

注そのそれは

未定義が返されるようは、まだエクスポートされていない

そしてbuttons/indexbuttons/MyComponentがレンダリングされるそして、エクスポートtexts/index

が続きます。それがレンダリングされる直前に、私は手動でrequirecomponents/index、それが今では定義されている、あなたのMyComponent1がindexファイル経由MyComponent2をインポートしようとしたとき、indexファイルがまだ輸出されていない、いくつかの定義された値は本質的には

を返します。それは未定義を返します。この問題を回避するには、のレンダリング方法の内からrequireMyComponent2にする必要があります。