ES Module
Definition
An ES module — ESM, sometimes written ECMAScript module — is a JavaScript file that declares what it exports and what it imports by name. It is the standard the language settled on, replacing the older patterns: CommonJS require, used by Node, and the script tags that dumped everything onto the global object. Modules are always in strict mode, their top-level variables are private to the file rather than global, and imports are resolved before any code runs, so the dependency graph is known statically. That last property is what makes tree-shaking possible. In the browser, a file becomes a module by being loaded with type set to module, or by being imported from one that already is.
Why It Matters
The format decides whether a generated page can be split up at all. Module scripts do not pollute the global namespace, so two libraries defining the same helper name no longer collide silently. They also load deferred by default — the browser fetches them without blocking HTML parsing and runs them after the document is parsed, which removes a whole class of element-not-found errors. The sharp edge is delivery. A module fetched from disk with a file:// URL is blocked by CORS, so a page that works when served over HTTP appears broken when opened by double-click, and the console message about the origin being null sends people hunting for a bug that is not in their code.
How It Works
The browser reads the script tag, fetches the module, parses it, and recursively fetches everything it imports before executing anything. Specifiers must be URLs — relative paths need the .js extension written out, since the browser does no extension guessing — unless an import map supplies the mapping for a bare name. The server must return a JavaScript MIME type such as text/javascript; anything else and the module is refused. Cross-origin module requests go through CORS, so a CDN must send the right headers. Each module is fetched and evaluated once per URL, however many files import it. A static host like 99helpers sets the content type from the file extension, so keeping the .js suffix is what makes it work.
Real-World Example
Someone splits a generated dashboard into three files — 'index.html', 'chart.js' and 'data.js' — and uploads all three to metrics-demo.99helpers.site. The HTML loads 'chart.js' as a module, which imports './data.js' by relative path. Opening the folder locally shows a blank page and a CORS error; served over HTTPS from the host, the same files work untouched. The only edit needed was writing the file extension in the import.
Common Mistakes
- ✕Omitting the .js extension in a relative import — that works in a bundler, but a browser requests the exact path and gets a 404
- ✕Opening a module page from the local filesystem and concluding the code is broken — the origin is null and the fetch is blocked
- ✕Mixing require and import in the same file, which a browser cannot do at all
- ✕Serving .js files with the wrong content type, so the browser downloads them instead of executing them
Related Terms
Import Map
A block of JSON in an HTML page that tells the browser which URL a bare module name like react should resolve to. It lets a page use normal import statements without a bundler.
Inline JavaScript
JavaScript written inside the HTML document — in a script element with no src attribute, or in an attribute such as onclick — rather than loaded from a .js file. It keeps a generated page to one file.
React via CDN
Running React by loading it from script tags on a public CDN rather than installing it and bundling it. It lets a single HTML file render a React app with no npm, no bundler and no compile step.
MIME Type
A MIME type, also called a media type or content type, is the short label a server sends to say what kind of data a response contains — text/html, image/png, application/pdf. The browser decides what to do with the bytes based on that label, not on the file name.
Relative Path
A relative path points at a file starting from the page that mentions it, rather than from the site root. It has no leading slash — styles.css, img/logo.png, ../fonts/inter.woff2.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →