Widely availableSuitable for production when it improves semantics, input, or browser integration.
Metadata and scripts Widely available

JavaScript modules

JavaScript modules allow code to be organized into reusable units. Modules use import to load other modules and export to declare what is available to import from other modules. In HTML, modules are loaded with <script type="module">. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Metadata and scripts

Overview

JavaScript modules allow code to be organized into reusable units. Modules use import to load other modules and export to declare what is available to import from other modules. In HTML, modules are loaded with <script type="module">. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
export
61
16
60
10.1
61
10.3
HTML attribute
nomodule
61
16
60
11
61
11
DOM API
ecmascript_modules

Support for ECMAScript modules
80
80
114
15
80
15
Other
html.elements.script.type.module

`type="module"`
61
79
60
10.1
61
10.3
javascript.operators.import

The import() syntax, commonly called dynamic import, is a function-like expression that allows loading an ECMAScript module asynchronously and dynamically into a potentially non-module environment.
63
79
67
11.1
63
11.3
javascript.operators.import_meta

The import.meta meta-property exposes context-specific metadata to a JavaScript module. It contains information about the module, such as the module's URL.
64
79
62
11.1
64
12
Operator
resolve

import.meta.resolve() is a built-in function defined on the import.meta object of a JavaScript module that resolves a module specifier to a URL using the current module's URL as base.
105
105
106
16.4
105
16.4
Statement
arbitrary module namespace identifier names

Arbitrary module namespace identifier names
88
88
87
14.1
88
14.5
default

`default` keyword with `export`
61
16
60
10.1
61
10.3
namespace

`export * as namespace`
72
79
80
14.1
72
14.5
Other
javascript.statements.import

The static import declaration is used to import read-only live binding which are exported by another module. The imported bindings are called live bindings because they are updated by the module that exported the binding, but cannot be re-assigned by the importing module.
61
16
60
10.1
61
10.3
Statement
arbitrary module namespace identifier names

Arbitrary module namespace identifier names
88
88
87
14.1
88
14.5
import attributes

The import attributes feature instructs the runtime about how a module should be loaded, including the behavior of module resolution, fetching, parsing, and evaluation. It's supported in import declarations, export...from declarations, and dynamic import().
123
123
138
17.2
123
17.2
worklet support

Available in worklets
114
Other
svg.elements.script.type.module
Experimental

`type='module'`
117
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Implementation note
  • Nested workers support was introduced in Safari 15.5.
  • Script loading in nested workers was introduced in Safari 16.4.
Notes 2 item(s)
Implementation note
  • Nested workers support was introduced in Safari on iOS 15.5.
  • Script loading in nested workers was introduced in Safari on iOS 16.4.
Notes 1 item(s)
Implementation note
  • Module scripts without the `async` attribute do not load when the page is served as XHTML (`application/xhtml+xml`). See bug 40518469.
Notes 2 item(s)
Implementation note
  • Module scripts without the `async` attribute do not load when the page is served as XHTML (`application/xhtml+xml`). See bug 40518469.
Removed
  • This feature was removed in a later browser version (79)
Notes 1 item(s)
Implementation note
  • Module scripts do not load when the page is served as XHTML (`application/xhtml+xml`).
Notes 1 item(s)
Implementation note
  • Module scripts without the `async` attribute do not load when the page is served as XHTML (`application/xhtml+xml`). See bug 40518469.
Notes 1 item(s)
Implementation note
  • Module scripts do not load when the page is served as XHTML (`application/xhtml+xml`).

Syntax

HTML 
<script type="module">
import { greet } from './utils.js';
greet('World');
</script>
<script nomodule src="legacy.js"></script>

Use cases

  • Control document behavior

    Use JavaScript modules to influence loading, metadata, or script behavior at the document level.

  • Tune performance strategy

    Apply JavaScript modules when earlier resource hints or document settings improve startup or runtime behavior.

Cautions

  • Test JavaScript modules in your target browsers and input environments before depending on it as a primary behavior.

Accessibility

  • Make sure JavaScript modules supports the intended task without making the page harder to perceive, understand, or operate.

Related links

Powered by web-features