Node.js: Code Outside the Browser / Working with Modules

ES Module

🌐 ES Modules (ESM)

ES Modules is the modern JavaScript module system, supported by both browsers and Node.js.

  • Export with export

  • Import with import

  • Loads modules asynchronously

👉 Features

  • Native support in browsers

  • Static imports — enables better tree-shaking

  • Clear, readable syntax

  • Works natively with modern tools like React, Vite, and Next.js

🧪 Sample Code

math.js

export function add(a, b) {
  return a + b;
}

app.js

import { add } from './math.js';
console.log(add(2, 3)); // 5

🛠 When to Use ES Modules

  • 🎨 Modern frontend development

  • 🔁 Full-stack apps spanning Node.js and the browser

💡 Good to Know

  • Node.js doesn't use ESM by default — add "type": "module" to package.json, or name files .mjs.

  • ESM supports top-level await — no wrapping in an async function needed.

  • CJS modules can't be require()'d from ESM directly, but ESM files can use dynamic import() to load a CJS module.

⚔️ CommonJS vs ES Modules, at a Glance

Feature

CommonJS (CJS)

ES Modules (ESM)

Import syntax

const x = require('x')

import x from 'x'

Export syntax

module.exports = x

export default x / export {...}

Default in Node.js

✅ Yes

❌ Needs config

Loading

Synchronous

Asynchronous

Works in browser?

❌ Not directly

✅ Yes

File extension

.js

.mjs (or .js with config)

Top-level await

❌ No

✅ Yes

Tree shaking

❌ No

✅ Yes (with bundlers like Webpack)