Import Maps

ELI5 - The Vibe Check

Import maps let you write import React from 'react' directly in the browser, no bundler required, and tell the browser exactly which URL that bare name actually points to. It's basically a phone book for your JavaScript imports: the browser looks up the name, finds the real address, and fetches it.

Real Talk

Import maps are a browser feature that control how bare module specifiers like react or lodash resolve to actual URLs when using native ES modules, without a bundler rewriting import statements. They are declared via a script type=importmap tag and are commonly used for bundler free development and CDN based dependency loading.

Show Me The Code

<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@19",
    "react-dom": "https://esm.sh/react-dom@19"
  }
}
</script>
<script type="module">
  import React from 'react'
</script>

When You'll Hear This

"We ditched the bundler for this microsite and used an import map instead." / "The import map points 'vue' at the CDN build, so every page shares one cached copy."