ESM vs CommonJS: What Is the Difference?
Understand ESM vs CommonJS modules in JavaScript and Node.js — static vs dynamic resolution, tree-shaking, and interop rules.
Expected Interview Answer
ESM (ECMAScript Modules, using import/export) is JavaScript’s standardized, statically analyzable module system, while CommonJS (using require/module.exports) is Node.js’s original, synchronous, dynamically evaluated module system predating the standard.
ESM imports and exports are declared at the top level and resolved statically at parse time, before any code runs, which lets bundlers perform tree-shaking because they can determine exactly what is imported without executing the module. CommonJS’s require() is a regular function call evaluated at runtime, so imports can be conditional or computed dynamically, but that flexibility means bundlers cannot statically analyze which exports are actually used. ESM loading is asynchronous by design (supporting top-level await and dynamic import()), whereas CommonJS require() is synchronous and blocks until the module is loaded, which works for local filesystem modules but does not translate cleanly to browsers or network-loaded code. Node.js today supports both, distinguishing them via the .mjs extension, the type: module field in package.json, or .cjs for explicit CommonJS, and interop between the two has specific rules — importing CommonJS from ESM works via a synthetic default export, but requiring an ESM file from CommonJS is not directly supported.
- ESM enables tree-shaking because imports/exports are statically analyzable
- ESM supports asynchronous loading, dynamic import(), and top-level await
- CommonJS require() allows fully dynamic, conditional module loading
- Both are natively supported in modern Node.js via package.json “type” field
AI Mentor Explanation
CommonJS is like a captain calling for equipment mid-over, on the spot, based on what just happened — whatever is requested arrives synchronously before play resumes. ESM is like the entire kit list being submitted and checked before the match even starts, so officials can verify in advance exactly which gear will be used and strip out anything unlisted. That upfront, verifiable list is what lets ground staff (a bundler) trim unused equipment ahead of time, something impossible with mid-over on-demand requests. The difference is static, pre-declared demand versus dynamic, in-the-moment requests.
Step-by-Step Explanation
Step 1
Static analysis happens first (ESM)
import/export declarations are parsed and resolved before any module code executes, enabling tree-shaking.
Step 2
Runtime evaluation happens first (CommonJS)
require() executes as a normal synchronous function call while the module body runs, so imports can be conditional.
Step 3
Loading model differs
ESM supports async loading, dynamic import(), and top-level await; CommonJS require() is synchronous and blocking.
Step 4
Interop is asymmetric
ESM can import CommonJS modules (via a synthetic default export), but CommonJS cannot directly require() an ESM module.
What Interviewer Expects
- Clear distinction between static (ESM) and dynamic (CommonJS) module resolution
- Understanding of why static analysis enables tree-shaking
- Awareness of synchronous vs asynchronous loading semantics
- Knowledge of how Node.js distinguishes the two (package.json “type”, .mjs/.cjs)
Common Mistakes
- Claiming ESM and CommonJS are interchangeable with no practical differences
- Forgetting that CommonJS require() is synchronous and ESM import is asynchronous by design
- Not knowing that requiring an ESM module from CommonJS is unsupported without dynamic import()
- Assuming tree-shaking works equally well on CommonJS code
Best Answer (HR Friendly)
“ESM is the modern, standardized way to import and export code using import and export keywords, and because it is declared upfront it lets build tools strip out unused code. CommonJS is Node’s older require-based system, which is more flexible for dynamic loading but harder for tools to optimize since it runs at execution time.”
Code Example
// CommonJS (math.cjs)
function add(a, b) { return a + b }
module.exports = { add }
// consumer.cjs
const { add } = require('./math.cjs')
console.log(add(2, 3))
// ESM (math.mjs)
export function add(a, b) { return a + b }
// consumer.mjs
import { add } from './math.mjs'
console.log(add(2, 3))
// Dynamic import works in both, but is the ONLY way to load ESM from CommonJS
async function loadEsm() {
const mod = await import('./math.mjs')
return mod.add(4, 5)
}Follow-up Questions
- Why does ESM support tree-shaking better than CommonJS?
- How does Node.js decide whether to parse a file as ESM or CommonJS?
- Can you require() an ESM module from a CommonJS file directly?
- What is top-level await and why can only ESM use it?
MCQ Practice
1. Why can bundlers tree-shake ESM code more reliably than CommonJS code?
Because ESM imports/exports are declared statically, bundlers know exactly what is used without running the code.
2. How does require() behave in CommonJS?
require() executes like a normal function call as the module body runs, allowing conditional requires.
3. What field in package.json tells Node.js to treat .js files as ESM?
Setting “type”: "module" in package.json makes Node.js interpret .js files as ES modules.
Flash Cards
ESM resolution timing? — Static — resolved at parse time before code runs.
CommonJS resolution timing? — Dynamic — require() runs as code executes.
Which supports top-level await? — ESM only.
How to load ESM from CommonJS? — Via the asynchronous dynamic import() function.