[解決済み] Webpackのインポートは、インポートの順序によって未定義を返す

質問

webpack + babelを使用しています。以下のような3つのモジュールがあります。

// A.js

// some other imports here
console.log('A');
export default 'some-const';

// B.js

import someConst from './A';
console.log('B', someConst);
export default 'something-else';

// main.js

import someConst from './A';
import somethingElse from './B';
console.log('main', someConst);

いつ main.js が実行されると、以下のようになりますね。

B undefined
A
main some-const

のimportを入れ替えると main.js , B になることで、得られる。

A
B some-const
main some-const

どうして B.js を得る undefined の代わりに、最初のバージョンでモジュール？何が問題なのでしょうか？

どのように解決するには？

ほぼ丸一日かけて問題を絞り込んで (別名、毛抜き作業)、ようやく循環依存症であることに気づきました。

次のような場所です。 // some other imports here , A は別のモジュールをインポートします。 C をインポートし、さらにそのインポートされた B . A で最初にインポートされます。 main.js であるため B は結局、輪の最後のリンクになり、Webpack (あるいはNodeのようなCommonJSのような環境)は、単に A 's module.exports は、まだ undefined . やがて，それは some-const と同じになりますが、同期コードである B を扱うことになります。 undefined を処理することになります。

というコードを移動させることで、循環的な依存関係をなくす。 C に依存しているコードを B を削除することで、問題が解決しました。Webpackがどうにかして警告してくれればいいのですが。

編集しています。 最後に、@cookie さんのご指摘の通りです。 循環依存性検出のためのプラグインがあります。 もしこの問題にぶつかるのを避けたいのであれば。