Default export (es5) circ dep

Now that we have basic understand of Webpack's module resolution system, it's time to understand how a circular dependency works.

We use the same four files as on the previous page: entry.js, moduleA.js, moduleB.js and moduleC.js. These are compiled into dist/main.js.

Note: This example is only valid for target 'es5'. We will discuss 'es6' in a later page.

entry.js

moduleA.js

moduleC.js

moduleB.js

import foo from './moduleA';
console.log(foo);

Before continuing, try to figure out what will be console logged by entry.js.

How does the circular dependency look like?

We have an import chain where moduleA.js eventually depends on itself:

entry -> moduleA -> moduleC -> moduleB -> moduleA

And moduleA.js defines a default export, no named exports

How does Webpack handle this circular dependency?

Follow on for a detailed explanation, but in short:

When Webpack encounters a non-cached module, it preliminary populates the cache for the module with module.exports = {}.
That means that when a module depends on itself, it will receive an empty object as the value for itself.
This can lead to unexpected undefined values for default exports.

In detail

Full file

Entrypoint requires `moduleA.js`

The entry point is being executed first. The first thing it encounters is a dependency on moduleA.js.

Webpack_require looks up `moduleA.js` (1)

There is a cache miss for moduleA.js. Webpack will start the process of looking the module from scratch.

Before any module code is being executed Webpack already sets a PRELIMINARY value for exports for that module in the module cache

This is key in understanding why we do not end up in an infinite loop.

Webpack_require looks up `moduleA.js` (2)

Imagine we set a breakpoint on line 37, where we are about to call the module function and execute code from moduleA.js

The values of variables is quite interesting!

Without executing a line of code of moduleA.js we have an entry in the module cache!!!

[Dropdown] Values in scope with breakpoint before line 37

moduleId = "moduleA.js";
cachedModule = undefined;
__webpack_module_cache__: {
  "moduleA.js": {
    exports: {}
  }
}

Webpack_require executes the `moduleA.js` function

Now we carry on with actually executing the moduleA.js code.

The first thing we encounter on line 7 is an import for moduleC.js, which will trigger another call to __webpack_require__.

Similarly, the first line of moduleC will trigger yet another call to __webpack_require__ to resolve moduleB.

Let's fast foward a bit >>

Webpack_require executes the `moduleB.js` function

So we are now 3 layers of recursion deep:

entry -> __webpack_require__('./src/regular/moduleA.js')
moduleA -> __webpack_require__('./src/regular/moduleC.js')
moduleC -> __webpack_require__('./src/regular/moduleB.js')

Let's add a breakpoint on line 14 and inspect the moduleCache there:

[Dropdown] module cache with breakpoint before line 14

__webpack_module_cache__: {
  "moduleA.js": {
    exports: {}
  },
  "moduleC.js": {
    exports: {}
  },
  "moduleB.js": {
    exports: {}
  }
}

This means that when we call __webpack_require__("./src/regular/moduleA.js") now, we will get a cached result. Even though the value in the cache is not properly set.

This means that the value of 'const bar' on line 15 will become undefined + 'bar' and we can also set the default export to "undefinedbar"

Let's fast forward again >>

Back to the `moduleA` function execution

We've resolved moduleC.js and moduleB.js and can now continue with the rest of moduleA.js

Let's add a breakpoint on line 8 and inspect the moduleCache there:

[Dropdown] module cache with breakpoint before line 8

__webpack_module_cache__: {
  "moduleA.js": {
    exports: {}
  },
  "moduleC.js": {
    exports: {
      default: "undefinedbarbaz"
    }
  },
  "moduleB.js": {
    exports: {
      default: "undefinedbar"
    }
  }
}

This means that the default export of moduleA will become "undefinedbarbaz" + 'bar'

dist/main.js

(function () {
  "use strict";
  var __webpack_modules__ = ({
    "./src/regular/moduleA.js":
      (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
        __webpack_require__.r(__webpack_exports__);
        var _moduleC__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/regular/moduleC.js");
        const foo = _moduleC__WEBPACK_IMPORTED_MODULE_0__["default"] + 'bar';
        __webpack_exports__["default"] = (foo);
      }),
    "./src/regular/moduleB.js":
      (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
        __webpack_require__.r(__webpack_exports__);
        var _moduleA__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/regular/moduleA.js");
        const bar = _moduleA__WEBPACK_IMPORTED_MODULE_0__["default"] + 'bar';
        __webpack_exports__["default"] = (bar);
      }),
    "./src/regular/moduleC.js":
      (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
        __webpack_require__.r(__webpack_exports__);
        var _moduleB__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/regular/moduleB.js");
        const baz = _moduleB__WEBPACK_IMPORTED_MODULE_0__["default"] + 'baz';
        __webpack_exports__["default"] = (baz);
      })
  });
  var __webpack_module_cache__ = {};
  function __webpack_require__(moduleId) {
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
      return cachedModule.exports;
    }
    var module = __webpack_module_cache__[moduleId] = {
      exports: {}
    };
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    return module.exports;
  }
  !function () {
    __webpack_require__.r = function (exports) {
      if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
        Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
      }
      Object.defineProperty(exports, '__esModule', { value: true });
    };
  }();
  var __webpack_exports__ = {};
  
  !function () {
    __webpack_require__.r(__webpack_exports__);
    var _moduleA__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/regular/moduleA.js");
    console.log(_moduleA__WEBPACK_IMPORTED_MODULE_0__["default"]);
  }();
})()
  ;

Lastly, after all imports are required, it means that the module cache will become:

  __webpack_module_cache__: {
    "moduleA.js": {
      exports: {
        default: "undefinedbarbazbar"
      }
    },
    "moduleC.js": {
      exports: {
        default: "undefinedbarbaz"
      }
    },
    "moduleB.js": {
      exports: {
        default: "undefinedbar"
      }
    }
  }

And the entrypoint will console.log 'undefinedbarbazbar'.

Take aways

Webpack will avoid an infinite loop by setting preliminary module.exports = {} for each module.
When the module which is depending on itself uses a default export, it will cause the dependent version to be undefined

Next example

Click here to visit the next example with named exports

Default export (es5) circ dep

How does the circular dependency look like?

How does Webpack handle this circular dependency?

In detail

Full file

Entrypoint requires moduleA.js

Webpack_require looks up moduleA.js (1)

Webpack_require looks up moduleA.js (2)

Webpack_require executes the moduleA.js function

Webpack_require executes the moduleB.js function

Back to the moduleA function execution