The situation:
// file: utils/index.js
export UtilsA from './utilsA.js';
export UtilsB from './utilsB.js';
// file: utils/utilsA.js
const UtilsA = () => {
// some stuff
};
export default UtilsA();
// file: utils/utilsB.js
import { ServiceA } from '../services';
const UtilsB = () => {
// some other stuff
};
export default UtilsB();
// file: services/index.js
export ServiceA from './serviceA.js';
// file: widgets/serviceA.js
import { UtilsA } from '../utils';
const ServiceA = () => {
// do something with UtilsA,
// don't even TOUCH UtilsB
};
export default ServiceA();
This blows up even though WidgetA
isn't using UtilsB
directly. Happens because ServiceA
is trying to get to UtilsA
through utils/index.js
, and utils/index.js
exports UtilsB
which requires ServiceA
!
Use Webpack Cylic Dependency Checker to check for cycles. In modules with cycles, refer to dependencies directly rather than through index.js
(I know, I know...it defeats the point of having index.js
!)