Webpack Circular Dependencies

README.md

Handling Webpack Circular Dependency Issues

• webpack/webpack#1788
• https://github.com/DelvarWorld/webpack-cyclic-dependency-checker

The situation:

Utils

// 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();

Services

// 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();

Explanation

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!

Solution

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!)