How can I conditionally import an ES6 module?

Question

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 this an ES6 proposal that has not been accepted? The link to the "software API" from this article brought me to the page outdated documents .

Answer 1

We now have a dynamic import proposal with ECMA. It is in stage 3. It is also available as a babel-preset .

Below is a way to do conditional rendering according to your case.

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

This basically returns a promise. The promise module is expected to receive the module. The offer also has other functions, such as multiple dynamic imports, default imports, js file imports, etc. Here you can find more information about dynamic imports.

Answer 2

If you want, you can use require. This is a way to get a conditional require statement.

 let something = null; let other = null; if (condition) { something = require('something'); other = require('something').other; } if (something && other) { something.doStuff(); other.doOtherStuff(); } 

Answer 3

You cannot import conditionally, but you can do the opposite: export something conditionally. It depends on your use case, so this may not be for you.

You can do:

api.js

 import mockAPI from './mockAPI' import realAPI from './realAPI' const exportedAPI = shouldUseMock ? mockAPI : realAPI export default exportedAPI 

apiConsumer.js

 import API from './api' ... 

I use this to mock analytics libraries such as mixpanel, etc., because currently I cannot have multiple builds or our interface. Not the most elegant, but it works. I just have a few ifs here and there depending on the environment, because in the case of mixpanel it needs initialization.

Answer 4

It seems like the answer is that at the moment you cannot.

http://exploringjs.com/es6/ch_modules.html#sec_module-loader-api

I think the goal is to make the most of static analysis, and conditionally imported modules violate this. It is also worth mentioning - I am using Babel , and I assume that System not supported by Babel because the API module loader has not become ES6 standard.

Answer 5

I managed to hide it in eval, hiding it from the static analyzer ...

 if (typeof __CLI__ !== 'undefined') { eval("require('fs');") } 

Answer 6

require() is a way to import some module at runtime, and it is equally suitable for static analysis like import if used with string literal paths. This requires the packer to select dependencies for the kit.

 const defaultOne = require('path/to/component').default; const NamedOne = require('path/to/component').theName; 

For dynamic resolution of modules with full support for static analysis, first index the modules in the indexer (index.js) and import the indexer in the host module.

 // index.js export { default as ModuleOne } from 'path/to/module/one'; export { default as ModuleTwo } from 'path/to/module/two'; export { SomeNamedModule } from 'path/to/named/module'; // host.js import * as indexer from 'index'; const moduleName = 'ModuleOne'; const Module = require(indexer[moduleName]); 

Answer 7

I was able to achieve this using the function called immediately and the operator request.

 const something = (() => ( condition ? require('something') : null ))(); if(something) { something.doStuff(); } 

Answer 8

Conditional imports can also be achieved using a ternary variable and require() s:

const logger = DEBUG? require('dev-logger'): require('logger');

This example is taken from ES Lint global docs: https://eslint.org/docs/rules/global-require

Answer 9

Now you can do this conditional import. Visit this link for dynamic imports.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_imports