Импорт Webpack возвращает undefined, в зависимости от порядка импорта

Я использую 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 вместо модуля в первой версии? Что не так?

Ответы

Ответ 1

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

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

Устранение циклической зависимости, вытеснив код, который C зависит от B, разрешило проблему. Wish Webpack как-то предупредит меня об этом.

Изменить: В последнем примечании, как указано @cookie, есть плагин для обнаружения круговой зависимости, если вы как бы избежать удара этой проблемы [снова].