Javascript ES - Module Script (esm / .mjs)


The module implementation in Ecma Script (ES2015).

An ES6 module is a Javascript file:

Everything inside a module is local to the module. To make it public, you need to export it

This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers.

Modules are deferred, and only run after a document is loaded.

As a browser parses your ES6 module code, it will discover a tree of dependencies that it needs to fetch in order to execute your code. The solution is to bundle them through a builder.

Esm Only

The esm module is the format that becomes universal.

When you see that a package is esm only Esm only reference, it means that it can't be imported with require.

If you want to follow this direction, you can modify your CommonJs project to be Esm only.




the contents of the module script will be evaluated.


The following sample shows how a script element that declare a module script

  • an external module script.
<script type="module" src="module.mjs"></script>
<script type="module">
  // or an inline script
  import {foo} from './bar.js';


All dependencies (expressed through JavaScript import statements) will be fetched.

Aggregating modules

// import "foo" and re-export some of its exports
export {bar, bar1} from "foo";

// import "bar" and export ALL of its exports
export * from "bar";

Integration with HTML



import-maps permits to map a name to an URI.


<script type="importmap">
    "imports": {
        "moment": "[email protected]/dist/moment.js"
  • A esm module defined inline also in the script element that uses the import map to resolve the location of the module.
<script type="module">
import moment from 'moment';
let now = moment().format()
console.log(`The actual date is ${now}`);
  • output:

Node loader

Node does not support natively the ESM module but with the help of a loader monitor, the loaded code can be compiled to the commonjs format (node format)


require = require("esm")(module/*, options*/)
module.exports = require("./server.js");


with Babel register

    presets: [


Json Module 1) permits to import data

Example: 2)

<script type="module">
 import peopleInSpace from "" assert { type: "json" };

 const list = document.querySelector("#people-in-space");
 for (const { craft, name } of peopleInSpace.people) {
   const li = document.createElement("li");
   li.textContent = `${name} / ${craft}`;

Documentation / Reference

Discover More
CommonJs (NodeJs) - Require

The import functionality implementation of commonjs (and then node) is done via the require function require basically: reads a Javascript file (generally a CommonJs module but it may be any javascript...
How to resolve the SyntaxError: Cannot use import statement outside a module?

This article shows you how to resolve the syntax Error: Cannot use import statement outside a module.
How to store and use data in HTML

This article shows where you can store and use data
Javascript - Dynamic Import (Module, Json)

dynamic import is in stage 4. is when the import statement is used as a function in order to execute it at runtime. The import() function-like form takes the module name as an argument and returns...
Javascript - Module

functionality in Javascript. A module is different from a script file because: it defines a well-scoped object that does not pollute the global namespace. It list explicitly its dependencies Javascript...
Javascript - Module Loader (Script Loader)

A loader searches and loads module and script into the javascript engine (environment). From the main script, they will: create a dependency graph from the require and import statement find them...
Javascript - Module Pattern

This article shows classic design pattern with ECMAScript on how to organize javascript code with a structure that make possible to: get input return output and hide the implementation from the...
Javascript - Transpiler (Transpiling)

A transpiler permits to take an language source and to transform it in a language target. The language source and target may be the same but with two differents version. compiling A transpiler permits...
Javascript Module - Dependency Graph

This page is the dependency graph between module. The dependency graph is build from a single module (called the entry point) for a ESM module with the import statement for a commonJs module (node...
Javascript Module - Import (Es Module)

This page is the import statement defined in the es module specification The ES6 import is: a function for dynamic import (performed at runtime time) or a statement for static import (performed...

Share this page:
Follow us:
Task Runner