What is the difference between ES modules and CommonJS?

Question

Accepted Answer

These are JavaScript's two module systems for splitting code across files.

## ES Modules (ESM) — the modern standard

```js
// import / export, used in browsers and modern Node
import { sum } from "./math.js";
import defaultThing from "./thing.js";
export const x = 1;
export default function () {};
```

## CommonJS (CJS) — Node's legacy system

```js
const { sum } = require("./math");
module.exports = { x: 1 };
```

## Key differences

| | ES Modules | CommonJS |
|---|---|---|
| Syntax | `import`/`export` | `require`/`module.exports` |
| Loading | static, async | dynamic, synchronous |
| Analyzable | ✅ → tree-shaking | ❌ harder |
| Bindings | live (read-only) | a copied value |
| `this` at top | `undefined` | `module.exports` |

**Static** means ESM imports are known at parse time, which lets bundlers do **tree-shaking** (drop unused exports). CommonJS `require` is dynamic (you can `require` conditionally), so it can't be analyzed as easily.

## Enabling ESM in Node

```json
{ "type": "module" } // in package.json, or use the .mjs extension
```

## Interop gotcha

You can't `require()` an ESM-only package from CommonJS; mixing the two has rough edges. ESM imports are also **live bindings** — if the exporter changes the value, importers see the new value (CJS gives you a snapshot copy).

## Why it matters

ESM is the future (browser-native, tree-shakeable, top-level `await`).

Prefer it for new code; understand CJS because much of the Node ecosystem still uses it.

	ES Modules	CommonJS
Syntax	`import`/`export`	`require`/`module.exports`
Loading	static, async	dynamic, synchronous
Analyzable	✅ → tree-shaking	❌ harder
Bindings	live (read-only)	a copied value
`this` at top	`undefined`	`module.exports`