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

User · Answer

Important difference if you use dynamic import Webpack mode eager   if  normalCondition         this will be included to bundle  whether you use it or not   import          if  process env SOMETHING      true          this will not be included to bundle  if SOMETHING is not  true    import

User · Answer

If you d like  you could use require  This is a way to have a conditional require statement   let something   null  let other   null   if  condition        something   require  something        other   require  something   other    if  something  amp  amp  other        something doStuff        other doOtherStuff

User · Answer

require   is a way to import some module on the run time and it equally qualifies for static analysis like import if used with string literal paths  This is required by bundler to pick dependencies for the bundle   const defaultOne   require  path to component   default  const NamedOne   require  path to component   theName    For dynamic module resolution with complete static analysis support  first index modules in an indexer index js  and import indexer in 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

User · Answer

Conditional imports could also be achieved with a ternary and require  s   const logger   DEBUG   require  dev-logger     require  logger     This example was taken from the ES Lint global-require docs  https   eslint org docs rules global-require

User · Answer

I was able to achieve this using an immediately-invoked function and require statement   const something         gt      condition   require  something     null        if something      something doStuff

User · Answer

No  you can t    However  having bumped into that issue should make you rethink on how you organize your code      Before ES6 modules  we had CommonJS modules which used the require   syntax  These modules were  dynamic   meaning that we could import new modules based on conditions in our code  - source  https   bitsofco de what-is-tree-shaking    I guess one of the reasons they dropped that support on ES6 onward is the fact that compiling it would be very difficult or impossible

User · Answer

Look at this example for clear understanding of how dynamic import works   Dynamic Module Imports Example  To have Basic Understanding of importing and exporting Modules   JavaScript modules Github  Javascript Modules MDN

User · Answer

You can t import conditionally  but you can do the opposite  export something conditionally  It depends on your use case  so this work around might 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 that to mock analytics libs like mixpanel  etc    because I can t have multiple builds or our frontend currently  Not the most elegant  but works  I just have a few  if  here and there depending on the environment because in the case of mixpanel  it needs initialization

User · Answer

obscuring it in an eval worked for me  hiding it from the static analyzer      if  typeof   CLI        undefined       eval  require  fs

User · Answer

Looks like the answer is that  as of now  you can t   http   exploringjs com es6 ch modules html sec module-loader-api  I think the intent is to enable static analysis as much as possible  and conditionally imported modules break that  Also worth mentioning -- I m using Babel  and I m guessing that System is not supported by Babel because the module loader API didn t become an ES6 standard

User · Answer

2020 Update You can now call the import keyword as a function  i e  import    to load a module at runtime  Example  const mymodule   await import modulename    or  import modulename       then mymodule   gt               See https   developer mozilla org en-US docs Web JavaScript Reference Statements import Dynamic Imports

User · Answer

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    gt           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

[javascript] How can I conditionally import an ES6 module?

Examples related to javascript

Examples related to module

Examples related to ecmascript-6