CommonJS vs ES Modules in Node.js

Master the two module systems that power the Node.js ecosystem and write more organized, reusable code.

📦

Welcome! Let's explore the two module systems in Node.js: CommonJS and ES Modules.

/* Ready to dive into modules? */

The Classic: CommonJS

Node.js traditionally uses CommonJS. You import modules with the require() function and export them by assigning to module.exports. This system is synchronous, meaning modules are loaded one by one, blocking further execution until complete.

The Standard: ES Modules

ES Modules are the modern standard for JavaScript. They use the import and export keywords. This system is asynchronous and allows for static analysis, which enables optimizations like "tree-shaking" (removing unused code).

Key Differences

The key differences are syntax (require vs import), loading mechanism (synchronous vs asynchronous), and how they handle the this keyword at the top level. ES Modules are generally preferred for modern projects.

Compatibility in Node.js

You can use ES Modules in Node.js by naming files with .mjs or setting "type": "module" in your package.json. While you can import CommonJS modules into ES Modules, the reverse is more complex. Understanding this interoperability is key for mixed codebases.

Practice Zone

Interactive Test 1: Syntax Sort

Drag the keywords to their correct module system.

Arrastra en el orden correspondiente.

Arrastra las opciones:

require()

import

module.exports

export

Completa el código:

CommonJS______

ES Modules______

Unlock with Premium

Interactive Test 2: Complete the Code

Rellena los huecos en cada casilla.


// CommonJS
const myModule = ('./myModule');
module. = someValue;

// ES Modules
 myFunction from './myFunction.js';
 const myVariable = 10;

Unlock with Premium

Practice Example: Code Editor

Create two files. In one, export a function using CommonJS. In the other, import and call that function.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

// exporter.js
function sayHello() {
  console.log("Hello from the module!");
}
module.exports = sayHello;

// importer.js
const sayHello = require('./exporter.js');
sayHello(); // Should log "Hello from the module!"

Unlock with Premium

Knowledge Check

Which function is used to import modules in CommonJS?

Unlock with Premium

← Previous Next →

Modules in the Real World

Understanding the difference is one thing, but using them effectively in a project is another. Here are some practical tips.

1. Interoperability: Using Both Together

Modern Node.js allows you to import a CommonJS module directly into an ES Module. This is crucial for using the vast ecosystem of older NPM packages that are still CJS-based.

// my-app.mjs (ESM)
import express from 'express'; // express is CJS

const app = express();
app.listen(3000);

[ESM seamlessly uses CJS package]

2. Activating ES Modules

To tell Node.js your project uses ES Modules, add "type": "module" to your package.json. This makes .js files default to ESM, and you can rename CJS files to .cjs if needed.

// package.json
{
  "name": "my-project",
  "type": "module"
}

Project is now ESM-first

Practical Takeaway: Start new projects with ES Modules ("type": "module") for future-proofing, but be prepared to work with CommonJS packages, as the ecosystem is still in transition.

Node.js Modules Glossary

require(): The CommonJS function used to import a module. It reads and executes the module file synchronously.
module.exports: In CommonJS, this object is what's returned from a require() call. You attach your exports to it.
import: The ES Modules keyword for importing modules. It is asynchronous and can import named or default exports.
export: The ES Modules keyword for exporting values. Can be used for multiple `named` exports or a single `default` export.
"type": "module": A field in `package.json` that tells Node.js to treat all `.js` files in the project as ES Modules.