Javascript Module - Import (Es Module)


This page is about the import statement defined in the es module specification

The ES6 import is:

that is used to import:

that have been exported from:

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('');



import {foo} from '';
import {foo} from '/foo/bar.js';
  • With a Relative path. The resolution of the target path is done from your current path
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';


Loader may have configuration files that define aliases.


import { myExport } from '~alias'
    "paths": {
      "~alias": ["./my-alias.ts"]
  • With Vitest
export default defineConfig({
  resolve: {
    alias: {
      '~utils': resolve(__dirname, './test-utils'),



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:
  • 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";


See Javascript - Dynamic Import (Module, Json)


  • Module:
// --myModuleFile.js--
function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
  };'GET', url, true);

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
  • Import
import { getUsefulContents } from 'myModuleFile.js';
getUsefulContents('', data => {

Es6 vs Es5 syntax

  • ES6
import Member from "ModuleName";
var Member = require("ModuleName").default;


SyntaxError: Cannot use import statement outside a module

How to resolve the SyntaxError: Cannot use import statement outside a module?

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...
ES - ES6 Harmony (ES2015)

ECMAScript 6 (also known as ES2015). The first ECMAScript Harmony specification, it is also known as ES6 Harmony class declarations (class Foo...
How to create a javascript global library (namespace pattern)

This article show you how Javascript global library are created with the namespace pattern
How to import Svg into React (Manually and with SvgR)?

This page shows you how you can show Svg in React. The problem is that Raw Svg are not natively React component and therefore cannot be added to the React tree directly. URL The Javascript world is...
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.
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 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 - Resolver

Resolver are function that: takes a dependency specifier (ie import or require) as input and returns a full file path They are used by all tools that needs to build a dependency graph such as a...
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 ES - Module Script (esm / .mjs)

The module implementation in Ecma Script (ES2015). An ES6 module is a Javascript file: automatically set in strict-mode with export statement and / or statement Everything inside a module is...

Share this page:
Follow us:
Task Runner