Hitting this exact problem currently:
FileA:
var b = require file B
var c = require file C
FileB:
var a = require file A
FileC:
var a = require file A
When I run the code, I get an error in File C:
A.doSomething is not a function
Threw a debugger in there and saw that A is an empty object. What's really weird is that I'm only getting an error in File C, but not File B. Super confused here.
This is not a webpack issue but a property of CommonJS modules.
When a CommonJS module is first required, its exports property is initialized to an empty object behind the scenes.
module.exports = {};
The module can then decide to extend this exports property, or override it.
exports.namedExport = function() { /* ... */ }; // extends
module.exports = { namedExport: function() { /* ... */ } }; // overrides
So when A requires B and B requires A right after, A is not executed again (which would produce an infinite loop), but its current exports property is returned. Since A required B at the very top of the file, before exporting anything, the require('A') call in the B module will yield an empty object.
A common fix for circular dependencies is to put your imports at the end of the file, after you've exported the variables needed by other 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';