0Pricing
JavaScript Academy · Lesson

ESM loader quirks, path/URL differences

Resolve URLs safely, understand relative vs bare specifiers, and see how file URLs differ from web URLs. Tiny, runnable demos.

Big picture

Goal: Resolve paths safely across environments.

  • Use the URL constructor to resolve relatives
  • Know relative vs bare specifiers
  • See file: vs https: differences
  • Avoid fragile string joins for paths
ESM loader quirks, path/URL differences — illustration 1

Relative against base

new URL(relative, base) handles path pieces and slashes correctly.

// Use URL to resolve "./" against a base
const base = "https://site.com/app/screens/";
const img = new URL("./images/icon.png", base);
console.log("resolved:", img.href);
ESM loader quirks, path/URL differences — illustration 2

All lessons in this course

  1. Globals, fetch availability, file/network APIs
  2. ESM loader quirks, path/URL differences
  3. Env variables & config patterns
← Back to JavaScript Academy