Are ES6 module imports hoisted?

Question

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 1

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

Answer 2

It will be a SyntaxError. According to this part of specification:

Module :    ModuleBody  ModuleBody :     ModuleItemList  ModuleItemList :     ModuleItem     ModuleItemList ModuleItem  ModuleItem :     ImportDeclaration     ExportDeclaration     StatementListItem 

It means that module can contain only ImportDeclaration's, ExportDeclaration's or StatementListItem's. According to this StatementListItem could not contain ImportDeclaration nor ExportDeclaration.

import myFunc1 from 'externalModule1';  

is an import declaration, while:

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

is a statement. So your code will result to a syntax error.

What about "will they all be loaded before running the code?". This part of specification contain next sentence:

NOTE: Before instantiating a module, all of the modules it requested must be available.

So, yeah. They will all be loaded before running the code.