0Pricing
HTML Academy · Lesson

Import Maps importmap

Map bare module specifiers to URLs with importmap.

The Bare Specifier Problem

In Node, import "lodash" works because the resolver finds node_modules/lodash. Browsers do not have node_modules — they need a real URL. Without help, import "lodash" throws "Failed to resolve module specifier".

What Import Maps Do

An import map declares a JSON dictionary that maps bare specifiers (and URL prefixes) to real URLs. The browser consults the map at module resolution time, converting import "lodash" into a fetch from the URL you configured.

<script type="importmap">
{
  "imports": {
    "lodash": "https://esm.sh/lodash@4.17.21",
    "preact": "https://esm.sh/preact"
  }
}
</script>

All lessons in this course

  1. ES Module Scripts type=module
  2. Import Maps importmap
  3. Dynamic Import() in Modules
  4. Module Federation Basics
← Back to HTML Academy