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 npmjs.com and yarnpkg.com 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:
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:
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…