web-dev-qa-db-fra.com

L'importation Webpack renvoie non défini, en fonction de l'ordre des importations

J'utilise webpack + babel. J'ai trois modules qui ressemblent à 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);

Quand 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 devenant le premier, je reçois:

A
B some-const
main some-const

Comment venir B.js obtient undefined au lieu d’un module dans la première version? Qu'est-ce qui ne va pas?

javascriptwebpackbabeljs
63
Olegs Jeremejevs

Après avoir passé presque une journée entière à réduire le problème (tirer les cheveux de AKA), je me suis enfin rendu compte que j'avais une dépendance circulaire.

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 du "cercle", et Webpack (ou tout environnement similaire à CommonJS, d'ailleurs, comme Node) le court-circuite en renvoyant A _ module.exports, qui 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 dont C dépend dépend de B a résolu le problème. Souhaite que Webpack m’avertisse de cette façon.

Edit: Sur la dernière note, comme le souligne @cookie, il existe un plugin pour la détection de dépendance circulaire , si vous ' Je voudrais éviter de frapper ce problème [encore].

152
Olegs Jeremejevs