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 //

Calling browser-only APIs like document or window inside server-side Node code

// Wrong: crashes on the server
function trackClick() { document.addEventListener('click', ...); }

// Correct: guard for environment
if (typeof document !== 'undefined') {
  document.addEventListener('click', ...);
}

The Solution //

Node has no DOM, no window, and no document — any code shared between browser and server (like a universal/isomorphic module) must guard against these APIs or check the execution environment before calling them, otherwise the server process crashes with a ReferenceError.

The Error //

Assuming require() and import can be freely mixed in the same file

// package.json determines which system a .js file uses:
// "type": "commonjs" (default) -> require()/module.exports
// "type": "module" -> import/export

The Solution //

CommonJS (require/module.exports) and ESM (import/export) are two distinct module systems that don't interop seamlessly by default. Mixing them in one file, or importing a CJS-only package with a bare import statement in an ESM file, is a common source of confusing 'require is not defined' or 'Cannot use import statement' errors.