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.