Імпорт Webpack повертається невизначеним залежно від порядку імпорту

Я використовую webpack + babel. У мене є три модулі, які виглядають так:

// 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

Якщо я поміняю місцями імпорт main.js, Bставши першим, я отримаю:

A
B some-const
main some-const

Як це, B.jsотримує undefinedзамість модуля у першій версії? Що не так?

Після майже повного робочого дня звуження проблеми (AKA, витягування волосся) я нарешті зрозумів, що маю циркулярну залежність.

Там, де сказано // some other imports here, Aімпортується інший модуль C, який, у свою чергу, імпортує B. Aімпортується першим у main.js, тому в Bкінцевому підсумку стає останньою ланкою в "колі", а Webpack (або будь-яке подібне до CommonJS середовище, наприклад, як Node) просто закорочує його, повертаючи A's module.exports, що все ще залишається undefined. Врешті-решт, він стає рівним some-const, але синхронний код в результаті Bзакінчує справу з цим undefined.

Усунення кругової залежності шляхом переміщення коду, який Cзалежить від B, вирішило проблему. Бажаю, щоб Webpack якось попередив мене про це.

Редагувати: В останній ноті, як зазначив @cookie, є плагін для виявлення кругової залежності , якщо ви хочете уникнути цієї проблеми [ще раз].