Are ES6 module imports hoisted?

javascript ecmascript-6 hoisting es6-modules
gilamran picture gilamran · Mar 29, 2015 · Viewed 17.7k times · Source

I know that in the new ES6 module syntax, the JavaScript engine will not have to evaluate the code to know about all the imports/exports, it will only parse it and “know” what to load.

This sounds like hoisting. Are the ES6 modules hoisted? And if so, will they all be loaded before running the code?

Is this code possible?

import myFunc1 from 'externalModule1';

myFunc2();

if (Math.random()>0.5) {
    import myFunc2 from 'externalModule2';
}

Answer

gilamran picture gilamran · Mar 29, 2015

After doing some more research, I've found:

  • Imports ARE hoisted! according to the spec of ModuleDeclarationInstantiation
  • ALL the dependent Modules will be loaded before running any code.

This code will have no errors, and will work:

localFunc();

import {myFunc1} from 'mymodule';

function localFunc() { // localFunc is hoisted
    myFunc1();
}

Related questions

Are variables declared with let or const hoisted?

I have been playing with ES6 for a while and I noticed that while variables declared with var are hoisted as expected... console.log(typeof name); // undefined var name = "John"; ...variables declared with let or const seem to have some …

Read More
What's the difference between using "let" and "var"?

ECMAScript 6 introduced the let statement. I've heard it that it's described as a local variable, but I'm still not quite sure how it behaves differently than the var keyword. What are the differences? When should let be used instead of …

Read More
"Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6

I'm using ArcGIS JSAPI 4.12 and wish to use Spatial Illusions to draw military symbols on a map. When I add milsymbol.js to the script, the console returns error Uncaught SyntaxError: Cannot use import statement outside a module` so I …

Read More