How does module resolution work in ES Modules?

ES Module resolution follows these rules: 1) Relative paths (./file.js, ../file.js) resolve relative to the importing module, 2) Absolute URLs (https://cdn.com/module.js) load from that URL, 3) Bare specifiers (lodash) require import maps or a bundler to resolve, 4) File extensions are required in browsers and Node.js ESM. The browser or runtime fetches, parses, and caches each module.

What are import maps and how do I use them?

Import maps let you control how module specifiers resolve in browsers. Add a script tag with type='importmap' containing JSON mapping: { 'imports': { 'lodash': 'https://cdn.skypack.dev/lodash' } }. Then you can use bare imports like: import _ from 'lodash'. Import maps work in modern browsers and eliminate the need for bundlers for simple cases.

Why can't I import from node_modules in the browser?

Browsers don't understand node_modules or bare specifiers without configuration. Solutions: 1) Use a bundler (Vite, Webpack) that resolves node_modules, 2) Use import maps to map specifiers to CDN URLs, 3) Use a dev server that transforms imports on-the-fly, 4) Manually copy and reference files with full paths. Modern tools handle this automatically.

What's the difference between relative and bare specifiers?

Relative specifiers start with ./ or ../ and resolve relative to the current file (./utils.js). Bare specifiers are package names without path indicators (react, lodash) and require special resolution - either through bundlers, import maps, or Node.js module resolution. Always use relative specifiers for your own files.

Module Resolution - ESModules.com

Module Specifiers

Relative Paths

import utils from './utils.js';
import config from '../config.js';

Absolute URLs (Browser)

import lodash from 'https://cdn.skypack.dev/lodash';

Bare Specifiers (Node.js)

import express from 'express';
import { readFile } from 'fs/promises';

Package.json "exports"

Control which files are exposed from your package:

{
  "exports": {
    ".": "./dist/index.js",
    "./utils": "./dist/utils.js",
    "./package.json": "./package.json"
  }
}

Conditional Exports:

{
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  }
}

File Extensions

Unlike CommonJS, ES Modules require explicit file extensions:

❌ Won't Work

import utils from './utils';

✅ Correct

import utils from './utils.js';

Module Resolution

Module Specifiers

Package.json "exports"

File Extensions

Related Topics

Continue Learning