Understanding JavaScript Modules: CommonJS vs ESM Deep Dive

The module system you choose affects bundling, tree-shaking, and runtime behavior. Here's what I've learned shipping both at Google.

CommonJS (CJS)

CJS loads modules synchronously. require() is a function call — it can appear anywhere, even inside conditions. This makes static analysis impossible.

ES Modules (ESM)

ESM imports are static declarations. The engine can analyze the entire dependency graph before execution — this enables tree-shaking.

Key Differences

The Live Binding Gotcha

Interop Challenges

• CJS require() of ESM: Not supported (use dynamic import() instead)
• ESM import of CJS: Works but you get the whole module.exports as default
• __dirname doesn't exist in ESM — use import.meta.url