HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///

Untitled Lesson

⚡ Total XP: 0|💻 backend XP: 0

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Select an unlocked node to view details root

Pascual Vila

Frontend Instructor // Code Syllabus

Common Pitfalls & Errors

The Error //

Omitting the file extension in a relative import once a project uses ESM

// Wrong in ESM: throws ERR_MODULE_NOT_FOUND
import db from './db';

// Correct: extension is mandatory
import db from './db.js';

The Solution //

CommonJS's require('./db') auto-resolves to db.js, but Node's ESM resolver has no such fallback and throws ERR_MODULE_NOT_FOUND if the extension is missing. Once package.json has "type": "module" (or a file uses .mjs), every relative import must include the explicit .js extension.

The Error //

Using __dirname or __filename in an ESM file and getting 'ReferenceError: __dirname is not defined'

// Wrong in ESM
console.log(__dirname); // ReferenceError

// Correct
import { fileURLToPath } from 'url';
import { dirname } from 'path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

The Solution //

Node only injects __dirname and __filename as magic globals in CommonJS files — they simply don't exist in the ESM module scope. Reconstruct the equivalent path manually from import.meta.url using the built-in url and path modules.