https://web.dev/import-maps-in-all-modern-browsers/

Skip to content
Open menu 
About Blog Learn Explore Patterns Case studies Close
The Chrome team is back at Google I/O on May 10! Check out the
sessions
Accurately lined up containers.
On this page

  * Further reading
  * Acknowledgements

  * Home
  * All articles

JavaScript import maps are now supported cross-browser

With import maps, importing ES modules now becomes a lot better.

Mar 28, 2023
Thomas Steiner
Thomas Steiner
TwitterGitHubGlitchHomepage
On this page

  * Further reading
  * Acknowledgements

Celebration
This web feature is now available in all three browser engines!

ES modules are a modern way to include and reuse JavaScript code in
web applications. They are supported by modern browsers and provide
several benefits over older, non-modular approaches to JavaScript
development.

A modern way to use ES modules is with the &LTscript type=
"importmap"> tag. This tag allows you to define a mapping of external
module names to their corresponding URLs, which makes it easier to
include and use external modules in your code.

To use the &LTscript type="importmap"> approach, you first need to
add it to the &LThead> section of your HTML document. Inside the tag,
you can define a JSON object that maps module names to their
corresponding URLs. For example:

<script type="importmap">
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
    }
  }
</script>

This code defines a single external module named "browser-fs-access"
and maps it to the URL of the browser-fs-access library, hosted on
the unpkg CDN. With this mapping in place, you can now use the import
keyword to include the browser-fs-access library in your code. Note
that the import keyword is only available inside a script tag with
the type="module" attribute.

<button>Select a text file</button>
<script type="module">
  import {fileOpen} from 'browser-fs-access';

  const button = document.querySelector('button');
  button.addEventListener('click', async () => {
    const file = await fileOpen({
      mimeTypes: ['text/plain'],
    });
    console.log(await file.text());
  });
</script>

Using the &LTscript type="importmap"> tag and the import keyword
provides several benefits over older, non-modular approaches to
JavaScript development. It allows you to clearly and explicitly
specify the external modules your code depends on, which makes it
easier to understand and maintain your code. Overall, using ES
modules with the &LTscript type="importmap"> tag is a modern and
powerful way to include and reuse JavaScript code in web
applications. You can feature-detect support as follows:

if (HTMLScriptElement.supports('importmap')) {
  // The importmap feature is supported.
}

Browser support

  * Chrome 89, Supported 89
  * Firefox 108, Supported 108
  * Edge 89, Supported 89
  * Safari 16.4, Supported 16.4

Further reading #

  * Specification
  * Using ES modules in browsers with import-maps

Acknowledgements #

Hero image by CHUTTERSNAP on Unsplash.Newly interoperable

Last updated

Mar 28, 2023 -- Improve article
Return to all articles
Share
subscribe
 

We want to help you build beautiful, accessible, fast, and secure
websites that work cross-browser, and for all of your users. This
site is our home for content to help you on that journey, written by
members of the Chrome team, and external experts.

Contribute

  * File a bug
  * View source

Related content

  * developer.chrome.com
  * Chrome updates
  * Case studies
  * Podcasts
  * Shows

Connect

  * Twitter
  * YouTube

  * Google Developers
  * Chrome
  * Firebase
  * Google Cloud Platform
  * All products

Dark theme [ ]

  * Terms & Privacy
  * Community Guidelines

Except as otherwise noted, the content of this page is licensed under
the Creative Commons Attribution 4.0 License, and code samples are
licensed under the Apache 2.0 License. For details, see the Google
Developers Site Policies. By Chrome DevRel