Webpack import 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 j'échange les importations dans main.js, B devenir le premier, je reçois:
A
B some-const
main some-const
Comment B.js devient undefined au lieu d'un module dans la première version? Quel est le problème?
1 réponses
Après presque une journée de travail complète de réduire le problème (aka hair-pulling), j'ai finalement réalisé que j'ai une dépendance circulaire.
Où il est dit // some other imports here, A importe un autre module C, qui, à son tour, importe B. {[1] } est importé en premier dans main.js, donc B finit par être le dernier lien dans le "cercle", et Webpack (ou tout environnement de type CommonJS, d'ailleurs, comme Node) le court-circuite en retournant A module.exports, qui est toujours undefined. Finalement, il devient égal à some-const, mais le code synchrone dans B finit par traiter avec undefined à la place.
Éliminant la dépendance circulaire, en déplaçant le code C dépend de B, a résolu le problème. Wish Webpack serait en quelque sorte me prévenir à ce sujet.
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 heurter ce problème [à nouveau].