what is _interopRequireDefault ?

Question

I have seen an explanation on this website that say :

_interopRequireDefault(): An ES6 CommonJS module is used as is (if it has a default export then it has a property named default). A normal CommonJS module becomes the value of the property default. In other words, in the later case, the module’s exports become the default export.

In codes, there is often several _interopRequireDefault written in.

So if I understand well, since default export is a bunch of key/value on the whole file exported as a total entity, _interopRequireDefault allows to choose which modules will enter in the default export of a specific code that it ?

Answer 1

To allow your code to consume modules written for Node.js as well as for ES6.

There is a differences between way modules work export in ES6 and CJS (Common JS specification).

Modules in Common JS :

module.exports = function () {};

Modules in ES6 :

export default function () {}

_interopRequireDefault has a rather simple logic :

function _interopRequireDefault(module) {
  const
      isCJSModule = module && module.__esModule,
      cjsStyedModule = { default: module };

  return isCJSModule ? module: cjsStyedModule;
}

CJS existed before ES6. Node.js still uses CJS version and all modules written originally for Node.js.

Although Node.js now supports ES6 modules experimentally, if you run with --experimental flag and name module files as .mjs.

Note : Now in 2020, Node.js also supports .js files with ES6 modules if you add a field "type": "module" in package.json. Read more here : https://medium.com/@nodejs/announcing-core-node-js-support-for-ecmascript-modules-c5d6dc29b663