JavaScript Modules: import and export with ES modules

JavaScript modules let you organize code in separate files and choose which values each file shares. Use export to make a function, class, or value available, then use import where you need it.

Quick answer: Add type="module" to a browser script, export values from a module file, and import them with a path that includes the file extension. A module’s top-level declarations stay scoped to that module.

Export and import named values

A named export lets a module share one or more values. The name in braces on the import must match the exported name unless you use an alias.

// math.js
export function add(a, b) {
  return a + b;
}

export const taxRate = 0.08;

Import the values from another file. The relative path starts with ./ when the file is in the same folder:

// app.js
import { add, taxRate } from "./math.js";

const subtotal = add(20, 5);
console.log(subtotal * (1 + taxRate));

Use as to rename an imported value locally, such as import { add as sum } from "./math.js". This can help avoid a naming conflict.

Use a default export

A module can have one default export. The importing file chooses the local name and does not wrap it in braces:

// greeting.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

// app.js
import sayHello from "./greeting.js";
console.log(sayHello("Sam"));

Choose named exports when a file shares several related values or when explicit names make imports easier to read. Use a default export when one main value represents the file.

Load a module in the browser

Tell the browser that your entry file is a module by adding type="module" to the script element:

<script type="module" src="./app.js"></script>

Module scripts are deferred by default, so the browser runs them after parsing the HTML. You do not need to add defer to this script element.

Fix common module loading errors

• Check that the import path is correct, including its capitalization and the .js extension.
• Serve the page over a local web server or HTTPS. Browsers generally block module imports from pages opened with a file:// URL.
• If you import from another origin, that server must allow the browser’s cross-origin request.
• Check the developer console and network panel for missing files, syntax errors, or an incorrect JavaScript MIME type.

JavaScript module questions

Can I use import in a regular script?

Static import and export statements belong in JavaScript modules. In a browser, mark the entry script with type="module". A regular script can use dynamic import() when it needs to load a module later.

Are variables shared between modules?

No. Each module has its own top-level scope. Export a value from one file and import it in another instead of relying on global variables.

Practice: split a small app into modules

Create greeting.js with a named makeGreeting function. Export it, import it from app.js, and write the result into an HTML element. Load app.js with type="module", then start a local web server and use the browser console to review any import errors.