Javascript Module - Import (Es Module)

About

This page is about 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 at build time)

that is used to import:

that have been exported from:

an external ES module,
another module such as commonCommonJS and AMD modules.
etc.

As this feature may not be implemented in all browsers natively at this time., you may need a transpilers.

Not to be confound with the import expression in CSS. See CSS - @import rule.

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

Example

Supported

Full Url

import {foo} from 'https://example.com/.../bar.js';

With an absolute path (resolve to https://example.com/foo/bar.js in the browser)

import {foo} from '/foo/bar.js';

With a Relative path. The resolution of the target path is done from your current path
- url path for a browser
- or working directory for node

import {foo} from './bar.js';
import {foo} from '../bar.js';

Supported using Node Path

Supported using NODE_PATH in some module loader

import {foo} from 'bar.js';
import {foo} from 'foo/bar.js';

Alias

Loader may have configuration files that define aliases.

Example:

import { myExport } from '~alias'

With tsconfig.json define the paths

{
    "paths": {
      "~alias": ["./my-alias.ts"]
    }
}

With Vitest

export default defineConfig({
  resolve: {
    alias: {
      '~utils': resolve(__dirname, './test-utils'),
    },
  }
}

Syntax

Static

Import the default member. It is possible to have a default export

import defaultMember from "module-name"; 
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";

Import an entire module namespace object where the properties are the module’s exports with the alias 'name'. 'name' is inserted into the current scope.

import * as name from "module-name";
// if the “module-name” module exports a function named foo(), you can write: 
name.foo()

Import a single member of a module. This inserts member into the current scope.

import { member } from "module-name";
import { member as alias } from "module-name";

Import multiple members of a module.

import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";

Import an entire module for side effects only, without importing any bindings.

import "module-name";

Dynamic

See Javascript - Dynamic Import (Module, Json)

Example

Module:

// --myModuleFile.js--
function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open('GET', url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

Import

import { getUsefulContents } from 'myModuleFile.js';
getUsefulContents('http://www.example.com', data => {
  doSomethingUseful(data);
});

Es6 vs Es5 syntax

import Member from "ModuleName";

in ES5, the import syntax was the require statement (is a commonJs statement)

var Member = require("ModuleName").default;

Javascript Module - Import (Es Module)

About

Example

Supported

Supported using Node Path

Alias

Syntax

Static

Dynamic

Example

Es6 vs Es5 syntax

Support

SyntaxError: Cannot use import statement outside a module

Documentation / Reference