DEV Community

tmhao2005
tmhao2005

Posted on

Understand "esModuleInterop" option in Typescript

#typescript #esmoduleinterop #webpack

Here are couple of cases that I have tested how the option esModuleInterop of Typescript compiler (tsc) works.

Each test will have 2 different imports (one is default import and an namespace import) and we'll check the generated code.

#1

  • { esModuleInterop: false } with tsc 
import * as foo from "foo";
import bar from "bar";

console.log(foo, bar)

// JS

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var foo = require("foo");
var bar = require("bar");
// I'm not sure why (`.default`), but most of `commonjs` modules 
// won't export this value which causes void 0
console.log(foo, bar.default);
Enter fullscreen mode Exit fullscreen mode

#2

  • { esModuleInterop: true } with tsc: 
import * as foo from "foo";
import bar from "bar";

console.log(foo, bar)

// JS
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};

Object.defineProperty(exports, "__esModule", { value: true });
var foo = __importStar(require("foo"));
var bar = __importDefault(require("bar"));

// In this case, `foo` won't work if `foo` is `commonjs` which is a single export: 
// `module.exports = {}` 
// then it would return { default: {} }
console.log(foo, bar.default);
Enter fullscreen mode Exit fullscreen mode

Finally, we have an issue with webpack:

Let's say to have module foo which is quite common pattern:

- lib
-- index.cjs.js
-- index.esm.js
Enter fullscreen mode Exit fullscreen mode

index.cjs.js

module.exports = {}
Enter fullscreen mode Exit fullscreen mode

index.esm.js

export default {}
Enter fullscreen mode Exit fullscreen mode

Then import:

import * as foo from "foo"

console.log(foo)
Enter fullscreen mode Exit fullscreen mode

with foo's package.json:

{
  main: './lib/index.cjs.js',
  module: './lib/index.esm.js'
}
Enter fullscreen mode Exit fullscreen mode

would result in in webpack:

var foo = __webpack_require__("./node_modules/foo/lib/index.esm.js");

console.log(foo) // { default: {...} }

// But with `cjs`, it works

var foo = __webpack_require__("./node_modules/foo/lib/index.cjs.js");

console.log(foo) // {...}
Enter fullscreen mode Exit fullscreen mode

If webpack takes es2015+ module, it will transform to harmony module.

/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony default export */ __webpack_exports__["default"] = (Bar);
Enter fullscreen mode Exit fullscreen mode
  • __webpack_require__ with esm: 
// foo.js
export default 1;

// result
__webpack_require__('foo.js'); // { default: 1 }
Enter fullscreen mode Exit fullscreen mode
  • __webpack_require__ with cjs: 
// foo.js
module.exports = 1;

// result
__webpack_require__('foo.js'); // 1
Enter fullscreen mode Exit fullscreen mode
  • esModuleInterop option won't affect to es2015+ module.

Top comments (0)

Read next

alaa-m1 profile image

React Redux with TypeScript - Data fetching with Redux ... practical examples ⚛️

Alaa Mohammad -

shaharke profile image

Introduction to Zod

Shahar Kedar -

heather_veva profile image

Introducing Hatchify: Low-code libraries for React, Node, and Sequelize

Heather Stevens -

giteden profile image

Micro Frontends with Vite and Bit

Eden Ella -