How to Use ES Modules in Modern Browsers: Compatibility and Tips

Browsers have begun supporting ES modules, and you can try them in the following browsers:

Safari 10.1

Chrome Canary 60 – enable experimental mode in chrome:flags

Firefox 54 – set dom.moduleScripts.enabled in about:config

Edge 15 – enable experimental mode in about:flags

You only need to add type=module to a script tag, and the browser will treat the inline or external script as an ECMAScript module. Although there are good articles about JavaScript modules, I want to share some browser‑specific module features.

Shortened import paths will not be supported

A valid module path must satisfy one of the following conditions:

Full URL address (non‑relative URL)

Starts with /. Starts with ./. Starts with ../. (other specifiers are reserved for future use, such as importing a built‑in browser module)

nomodule can be used for fallback

If a browser supports type=module, it will ignore script tags with the nomodule attribute, allowing you to provide a fallback for browsers that do not support ECMAScript modules.

Default Defer

The loading order is 2.js, 1.js, 3.js. Regular scripts block page rendering during loading; you can use defer to avoid this, which delays execution until the document is parsed while preserving order. Module scripts are defer by default, so they do not block HTML parsing.

Inline module scripts are also deferred

The execution order will be: 1.js, inline script, inline module, 2.js. Regular inline scripts ignore defer, whereas inline module scripts are always deferred, regardless of whether they import anything.