Javascript Module - Import (Es Module)

1 - About

The import statement for a es module

The ES6 import statement is used to import:

that have been exported from:

  • ES6

import Member from "ModuleName";


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

This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers.
Not to be confound with the import expression in CSS. See CSS - @import rule.

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

3 - Syntax

3.1 - Static


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

3.2 - Dynamic

4 - Example

4.1 - Module Location

  • Supported:

// Via the http(s) scheme
import {foo} from 'https://example.com/.../bar.js';
// Full Qualified
import {foo} from '/foo/bar.js';
// Relative
import {foo} from './bar.js';
import {foo} from '../bar.js';

  • Supported using NODE_PATH in some module loader

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

4.2 - Mozilla Doc

  • Module:

// --file.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);
});

5 - Support

5.1 - SyntaxError: Cannot use import statement outside a module


SyntaxError: Cannot use import statement outside a module

You get this error when you try to use an import statement on Node. Why ?

How to resolve:

  • use the require syntax
  • or use a transpiler such as babel to transform your ES module to a CommonJs module

Example from Babel


yarn add @babel/preset-env --dev


{
    // To be able to use import 
    // https://babeljs.io/docs/en/babel-preset-env#targetsesmodules
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "esmodules": true
                }
            }
        ]
    ]
}

6 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap