How can I conditionally import an ES6 module?

javascript module ecmascript-6
ericsoco picture ericsoco · Apr 2, 2016 · Viewed 128.2k times · Source

I need to do something like:

if (condition) {
    import something from 'something';
}
// ...
if (something) {
    something.doStuff();
}

The above code does not compile; it throws SyntaxError: ... 'import' and 'export' may only appear at the top level.

I tried using System.import as shown here, but I don't know where System comes from. Is it an ES6 proposal that didn't end up being accepted? The link to "programmatic API" from that article dumps me to a deprecated docs page.

Answer

thecodejack picture thecodejack · Oct 3, 2017

We do have dynamic imports proposal now with ECMA. This is in stage 3. This is also available as babel-preset.

Following is way to do conditional rendering as per your case.

if (condition) {
    import('something')
    .then((something) => {
       console.log(something.something);
    });
}

This basically returns a promise. Resolution of promise is expected to have the module. The proposal also have other features like multiple dynamic imports, default imports, js file import etc. You can find more information about dynamic imports here.

Related questions

Export multiple classes in ES6 modules

I'm trying to create a module that exports multiple ES6 classes. Let's say I have the following directory structure: my/ └── module/ ├── Foo.js ├── Bar.js └── index.js Foo.js and Bar.js each export a default ES6 class: // Foo.js …

Read More
ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import

I'm new to ES6 (ECMAScript 6), and I'd like to use its module system in the browser. I read ES6 is supported by Firefox and Chrome, but I'm getting the following error using export Uncaught SyntaxError: Unexpected token import I have …

Read More
Node.js plans to support import/export ES6 (ECMAScript 2015) modules

I've been looking all over the Internet without a clear answer for this. Currently Node.js uses only CommonJS syntax to load modules, and if you really want to use the standard ECMAScript 2015 modules syntax, you either have to transpile …

Read More