JavaScript Dynamic Import

Written by Swapnil RajaPublished 24 Aug 2026

import() loads a module while the program is running, returning a promise.

The static import loads everything up front.

import() loads only when you actually call it.

Example

javascript

// Simulating a dynamic import with a promise, since there is
// no second file to load here.
function importMathModule() {
  return Promise.resolve({
    double: function (n) { return n * 2; }
  });
}

importMathModule().then(function (module) {
  console.log(module.double(5));
});

PreviousJavaScript Module Scripts NextJavaScript Module Patterns

Example

javascript

function importMathModule() {
  return Promise.resolve({ double: function (n) { return n * 2; } });
}

async function run() {
  const math = await importMathModule();
  return math.double(21);
}

run().then(function (result) {
  console.log(result);
});

Example

javascript

function importChartModule() {
  return Promise.resolve({ render: function () { return "chart rendered"; } });
}

async function maybeShowChart(showChart) {
  if (!showChart) {
    return "chart module never loaded";
  }
  const chart = await importChartModule();
  return chart.render();
}

maybeShowChart(true).then(function (result) {
  console.log(result);
});
maybeShowChart(false).then(function (result) {
  console.log(result);
});

Example

javascript

function importBrokenModule() {
  return Promise.reject(new Error("module not found"));
}

async function run() {
  try {
    await importBrokenModule();
    return "loaded";
  } catch (error) {
    return "failed: " + error.message;
  }
}

run().then(function (result) {
  console.log(result);
});

Example

javascript

function importShapesModule() {
  return Promise.resolve({
    square: function (s) { return s * s; },
    circle: function (r) { return Math.round(Math.PI * r * r); }
  });
}

importShapesModule().then(function ({ square, circle }) {
  console.log(square(4) + " and " + circle(3));
});

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Import</title>
</head>
<body>

  <h1>Dynamic Import</h1>

  <button id="load">Load the chart module</button>
  <p id="out">Not loaded yet</p>

  <script type="module">
    document.getElementById("load").addEventListener("click", async function () {
      const out = document.getElementById("out");
      out.textContent = "Loading...";

      try {
        const chart = await import("./chart.js");
        out.textContent = chart.render();
      } catch (error) {
        out.textContent = "Could not load the chart module";
      }
    });
  </script>

</body>
</html>

JavaScript Dynamic Import

Example

How Dynamic Import Works

Syntax

Using await

Example

Loading Conditionally

Example

Handling a Failed Import

Example

Destructuring the Result

Example

Static Versus Dynamic

Example

Complete Example

Try It Yourself

Important Points

Conclusion