importations circulaires avec webpack renvoyant un objet vide
Frapper ce problème exact actuellement:
FileA:
var b = require file B
var c = require file C
FileB:
var a = require file A
FileC:
var a = require file A
Lorsque j'exécute le code, j'obtiens une erreur dans le fichier C:
A.doSomething is not a function
Jeté un débogueur là-dedans et vu que A est un objet vide. Ce qui est vraiment bizarre, c'est que je ne reçois qu'une erreur dans le fichier C, mais pas dans le fichier B. Super confus ici.
Ce n'est pas un problème de webpack mais une propriété des modules CommonJS.
Lorsqu'un module CommonJS est requis pour la première fois, sa propriété exports est initialisée en un objet vide en arrière-plan.
module.exports = {};
Le module peut alors décider d'étendre cette propriété exports ou de la remplacer.
exports.namedExport = function() { /* ... */ }; // extends
module.exports = { namedExport: function() { /* ... */ } }; // overrides
Ainsi, lorsque A requiert B et B requiert A juste après, A n'est pas exécuté à nouveau (ce qui produirait une boucle infinie) , mais sa propriété exports actuelle est renvoyée. Puisque A requiert B tout en haut du fichier, avant d'exporter quoi que ce soit, l'appel require('A') dans le module B donnera un objet vide.
Une solution courante pour les dépendances circulaires consiste à placer vos importations à la fin du fichier, après vous avez exporté les variables nécessaires aux autres modules.
A:
module.exports = { foo: 'bar' };
require('B'); // at this point A.exports is not empty anymore
B:
var A = require('A');
A.foo === 'bar';