import

Baseline Widely available *

This feature is well established and works across many devices and browser versions. Its been available across browsers since 20185.

* Some parts of this feature may have varying levels of support.

import strict modeimport embedded scripts

There is also a function-like dynamic import(), which does not require scripts of type="module".

Dynamic import is useful in situations where you wish to load a module conditionally, or on demand. The static form is preferable for loading initial dependencies, and can benefit more readily from static analysis tools and tree shaking.

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

defaultExport
module-name: .js bundler
name: namespace
export, exportN
alias, aliasN: import js

name module object namespace export import * as name individual named export

myModule /modules/my-module.js

import * as myModule from "/modules/my-module.js";

myModule doAllTheAmazingThings()

myModule.doAllTheAmazingThings();

my-module myExport export myExport

import { myExport } from "/modules/my-module.js";

foo bar

import { foo, bar } from "/modules/my-module.js";

alias

shortName

import { reallyReallyLongModuleExportName as shortName } from "/modules/my-module.js";

aliases

import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short,
} from "/modules/my-module.js";

side effect

import "/modules/my-module.js";

exportimport

import myDefault from "/modules/my-module.js";

It is also possible to use the default syntax with the ones seen above (namespace imports or named imports). In such cases, the default import will have to be declared first. For instance:

import myDefault, * as myModule from "/modules/my-module.js";
// myModule used as a namespace

import myDefault, { foo, bar } from "/modules/my-module.js";
// specific, named imports

import promise

import("/modules/my-module.js").then((module) => {
  // 
});

await

let module = await import("/modules/my-module.js");

AJAX JSON

file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () {
    callback(this.responseText);
  };
  xhr.open("GET", url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, (data) => callback(JSON.parse(data)));
}

main.js

import { getUsefulContents } from "/modules/file.js";

getUsefulContents("http://www.example.com", (data) => {
  doSomethingUseful(data);
});

This example shows how to load functionality on to a page based on a user action, in this case a button click, and then call a function within that module. This is not the only way to implement this functionality. The import() function also supports await.

const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
  link.addEventListener("click", (e) => {
    e.preventDefault();

    import("/modules/my-module.js")
      .then((module) => {
        module.loadPageInto(main);
      })
      .catch((err) => {
        main.textContent = err.message;
      });
  });
}

Specification
ECMAScript 2027 LanguageSpecification # sec-imports

export
Previewing ES6 Modules and more from ES2015, ES2016 and beyond
ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
ES modules: A cartoon deep-dive, Hacks blog post by Lin Clark
Axel Rauschmayer's book: "Exploring JS: Modules"

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025716 by MDN contributors.

View this page on GitHub Report a problem with this content

import

In this article

alias

file.js

main.js

Help improve MDN