JS: Import/Export

By Xah Lee. Date: . Last updated: .

New in ES2015.

Basic Import/Export Examples

Export Multiple Names

// file lib.js

const f1 = ((x) => (x+1));

const f2 = ((x) => (x+2));

export {f1,f2};
// main.js
import {f1, f2} from "./lib.js";

console.log ( f1(1) );

And here's the HTML to load the main.js

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

Note, you must have type="module".

Basic Default Export

Before JavaScript ES2015, it is common for a lib to export just 1 value. (typically a object, such as xyz, with many methods as properties. For example, JQuery does this with dollar sign $ as name. [see jQuery Tutorial by Example] ).

JavaScript ES2015 has a special syntax for exporting just 1 value, and calls it “default” export/import.

Here's a basic example:

// file lib2.js

// export a object

export default {
    f1: ((x) => x+1),
    f2: ((x) => x+2),
};

// note, no name is given to the object
// main.js

// import a value from lib2.js , and name it g

import g from "./lib2.js";

console.log ( g.f1(1) );

And here's the HTML to load the main.js

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

Note, you must have type="module".

Export Explained

Export, is to mark names or values. (the “name” can be variable name, function name, class name, object name, etc.).

The purpose of the marking is so that another file can “import” these marked names or values.

There are 2 kinds of export:

They are separate as 2 kinds because each has different syntax, and each also have different import syntax.

Note, from language design point of view, “default” export is not necessary, because you can just do named export with 1 name. But people find it convenient to have 1 special syntax that just export/import 1 value.

You can mix named export and default export. That is, you can export 1 or more names/values, and also export 1 value as the “default”.

When people import from your library, they can do any of:

Export Syntax for Named Export

There are several syntax for named export.

Following forms put all export names together.

Following forms mark export at the same line as declaration:

Note, let with multiple names or assignment also works. And also work with var and const. (constant must have a value when declared.)

[see JS: let Declaration]

Export Syntax for Named Export from a Module

You can export names from another module you loaded.

Export Syntax for Default Export

Default Export is a syntax that marks just 1 value for export.

Note, the above form of function can also be class and function*

[see JS: Class Tutorial]

[see JS: Generator Function]

You can also use this form:

Export Syntax for Default Export from a Module

Import Syntax for Default Export

Import Syntax for Named Export

Load Module

This will just load module:

import path;

Cross Origin Error

Import/export do not work over local file system. You'll get a cross origin error.

If you want to test them, you need to have the html page from a http server. You can start a local server.

Import/Export, Top-Level Only

Import/Export must be top level only. Meaning, it cannot happen inside a block of code or in if statement.

Import/Export Are Hoisted

The position of import or export statement in source file does not matter.

For example, this is ok:

console.log ( f(1) );
import {f} from "./lib.js";

Import/Export Are Static

Import/export are static. For example, it's impossible have code that determines which name to import/export.

Import and Export Are Ad-Hoc Syntax of Little Language

The import/export syntax are little ad-hoc language, having nothing to do with rest of JavaScript language syntax.

For example, the {} in export {name1,name2} are not object nor code block.

Module Path Syntax

2018-03-19 in safari, this is is error:

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

you get:

TypeError: Module specifier does not start with "/", "./", or "../".

must be like this

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

2018-03-19 in safari, this is error

<script src="./main.js"></script>

you get

SyntaxError: Unexpected token '{'. import call expects exactly one argument.

must be

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

If your code uses import or export, then it must be loaded as module.

Reference

ECMAScript 2015 §ECMAScript Language: Scripts and Modules#sec-modules

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.