ES Modules: All You Need To Know

Konstantin Münster
4 min readSep 4, 2022

ESM and CommonJS are Javascript’s module systems. Let’s understand how they compare and when to choose which system.

Photo by EJ Li on Unsplash

ES Modules (or short: ESM) and CommonJS (or short: CJS) are the two module systems in Javascript that are actively being used. Module Systems allow us to share and reuse code easily. For example, we can write a module for image compression which can then be distributed via and used by developers around the world.

What is CommonJS?

CommonJS was introduced as the default module system for Node.js. Since this was way before ES Modules were released, most of the tooling and packages you find on and were initially written in CommonJS.

In Node, each file is treated as a separate module. You can import and export with the following CommonJS syntax:

CommonJS syntax
CommonJS syntax

While Node.js has been using the CommonJS standard for years, the browser never had a module system, as every major decision such as a module system must be first standardized by ECMAScript and then implemented by the browser.

What are ES Modules?

This standardization process has been completed with ES6. It defines ES Modules as the ECMAScript standard for working with modules in the browser.

The syntax for importing and exporting is slightly different compared to CommonJS:

ES Modules syntax
ES Modules syntax

Frontend frameworks like React or Vue have been using the ESM syntax even before it became a standard in the browser. Though they used tools like Babel to transpile it to CommonJS syntax. Hence, most frontend devs are more familiar with ESM than CJS.

Incompatibilities Between ES Modules and CommonJS

Effectively, we now had two module systems that had a different syntax as well as some internal things that worked differently: ESM as the standard in browser-land, and CJS as…

Konstantin Münster

Writing about Web Development and Freelancing. //