CommonJS vs ESM differences in Node.js - Visual Side-by-Side Comparison

Concept Flow - CommonJS vs ESM differences

Start: Module Import

↓

Check Module Type

↓

CJS

↓

Use require()

↓

Module Loaded

↓

Code Execution

This flow shows how Node.js decides between CommonJS and ESM modules, uses different import/export syntax, then loads and executes the module.

Execution Sample

Node.js

const fs = require('fs');
import path from 'path';
module.exports = { read: fs.readFile };
export const version = '1.0';

This code snippet mixes CommonJS and ESM syntax to show their import/export differences.

Execution Table

Step	Action	Syntax Used	Module System	Result
1	Import 'fs' module	require('fs')	CommonJS	fs module loaded synchronously
2	Import 'path' module	import path from 'path'	ESM	path module loaded asynchronously
3	Export read function	module.exports = {...}	CommonJS	Exports object set for CJS
4	Export version constant	export const version = '1.0'	ESM	Named export created for ESM
5	Module execution	N/A	Both	Code runs with respective imports/exports
6	Exit	N/A	N/A	Module loaded and ready

💡 Module finishes loading after all imports and exports are processed

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
fs	undefined	fs module object	fs module object	fs module object	fs module object	fs module object
path	undefined	undefined	path module object	path module object	path module object	path module object
module.exports	{}	{}	{ read: fs.readFile }	{ read: fs.readFile }	{ read: fs.readFile }	{ read: fs.readFile }
version	undefined	undefined	undefined	undefined	'1.0'	'1.0'

Key Moments - 3 Insights

Why can't we use 'import' inside CommonJS modules?

Because 'import' is part of ESM syntax which runs asynchronously and requires the module to be treated as ESM, as shown in steps 2 and 4 of the execution_table.

Why does 'module.exports' work only in CommonJS?

'module.exports' is the way CommonJS defines exports synchronously, as seen in step 3, but ESM uses 'export' keyword instead, shown in step 4.

Can we mix 'require' and 'import' in the same file?

No, Node.js treats files as either CommonJS or ESM. Mixing causes errors unless using special loaders or flags, as the execution_table shows separate handling.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the ESM import syntax used?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Check the 'Syntax Used' column for 'import' keyword.

According to variable_tracker, what is the value of 'module.exports' after step 3?

A {}

B undefined

C { read: fs.readFile }

D '1.0'

💡 Hint

Look at the 'module.exports' row under 'After Step 3' column.

If we replace 'module.exports' with 'export default' in the code, what changes in the execution flow?

A Module system stays CommonJS but exports differently

B Module system switches to ESM and uses 'import' syntax

C No change, both work the same

D Module fails to load

💡 Hint

Refer to concept_flow where export syntax determines module system.

Concept Snapshot

CommonJS uses 'require' and 'module.exports' for synchronous imports/exports.
ESM uses 'import' and 'export' keywords for asynchronous, standard module syntax.
Node.js treats files as either CommonJS or ESM, not both.
Mixing syntax requires special configuration.
ESM supports static analysis and tree shaking.
CommonJS is older, ESM is modern standard.

Full Transcript

This visual execution compares CommonJS and ESM modules in Node.js. It starts by checking the module type, then uses either 'require' for CommonJS or 'import' for ESM to load modules. CommonJS exports use 'module.exports', while ESM uses 'export' keywords. The execution table traces each step, showing how variables like 'fs', 'path', 'module.exports', and 'version' change. Key moments clarify why mixing import styles is not allowed and how exports differ. The quiz tests understanding of syntax usage and module system behavior. The snapshot summarizes the main differences and usage rules for these two module systems.