L’importation Webpack renvoie undefined, en fonction de l’ordre des importations

J’utilise webpack + babel. J’ai trois modules ressemblant à ceci:

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

Lorsque main.js est exécuté, je vois ce qui suit:

 B undefined A main some-const 

Si je main.js les importations dans main.js , B devenant le premier, j’obtiens:

 A B some-const main some-const 

Comment se fait-il que B.js soit undefined place d’un module dans la première version? Qu’est-ce qui ne va pas?

Après presque une journée complète de travail sur le problème (AKA), je me suis finalement rendu compte que j’avais une dépendance circulaire.

Là où il est dit // some other imports here , A importe un autre module C , qui à son tour importe B A est importé en premier dans main.js , donc B finit par être le dernier lien dans le “cercle”, et Webpack (ou tout autre environnement de type CommonJS, comme Node par exemple) le court-circuite simplement en renvoyant A module.exports , qui n’est toujours undefined . Finalement, il devient égal à some-const , mais le code synchrone dans B finit par traiter avec undefined .

L’élimination de la dépendance circulaire, en déplaçant le code que C dépend de B , a résolu le problème. Wish Webpack me préviendrait d’une manière ou d’une autre.

Edit: Sur la dernière note, comme indiqué par @cookie, il y a un plugin pour la détection de dépendance circulaire , si vous souhaitez éviter de rencontrer ce problème [encore une fois].