Import Maps

TL;DR

Explanation

Import maps (<script type='importmap'>) define a JSON mapping of bare specifiers to URLs. Without a bundler: import 'lodash' resolves to 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/+esm'. This enables CDN-based ES module development without npm/bundler. Also supports scopes for version-specific imports in nested dependencies. Import maps must be declared before any module scripts. Fully supported in Chrome 89+, Firefox 108+, Safari 16.4+. Use esm.sh or skypack for CDN-hosted ES modules.

Common Misconception

Why It Matters

Common Mistakes

• Declaring import map after module scripts — must come first.
• Using CommonJS CDN URLs — import maps need ES module (ESM) URLs.
• Expecting import maps to work in Node.js — they're a browser feature (Node has its own resolution).

Code Examples

<!-- Before import maps: requires bundler for bare specifiers -->
<script>
import lodash from 'lodash'; // Fails in browser
</script>

<script type="importmap">
{
  "imports": {
    "lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.21/+esm",
    "react": "https://esm.sh/react@18",
    "react-dom/client": "https://esm.sh/react-dom@18/client"
  }
}
</script>
<script type="module">
  import _ from 'lodash'; // Works!
</script>

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap

Tags

Related Terms