How can I conditionally import an ES6 module?

javascript

dynamic-imports

promise-engineering

babel

byAnton Shumikhin·Feb 9, 2025

// Usage inside an async function for that sweet, sweet readability
async function loadModule(condition) {
  const module = await import(condition ? 'module-name' : 'another-module');
  // Here's Johnny, I mean... module
}

// To invoke or not to invoke, that's yourCondition 😉
loadModule(yourCondition);

This dynamic duo, also known as async/await and dynamic import(), is your ticket to conditionally loading ES6 modules based on a boolean condition. They're here to save your code's clarity and maintainability, providing a nice and tidy syntax for your module-loading needs.

The nitty-gritty of dynamic imports

ES6's dynamic imports are the mavericks of module loading. Unlike their ancestors, static imports, these wildcards can load JavaScript modules conditionally or on demand. Meaning, your application's state, or user permissions won't rock the boat of your loading process.

Determining when to get dynamic

Introducing dynamic imports to your code is akin to getting a Swiss army knife for your module-loading scenarios. Here's when it comes handy:

Got a mammoth-sized module that's only needed under certain circumstances? Summon it using dynamic imports.
Conducting the mad scientist gambit of feature flags or A/B testing? Dynamic imports to the rescue.
Loading modules for specific user roles? You've guessed it, dynamic imports.

Promise-land of dynamic import

The dynamic import() brings the magic of Promises to module loading. Using .then() or await with import() turns your module loading into the piece of 🍰. It's like saying abracadabra and waiting for the magic to happen:

// watch me pull a rabbit... err... module, out of my hat
import('dynamic-module').then(module => {
  module.doSomething();
});

Using Babel for setting up backward compatibility

In case your JavaScript environment missed the memo on dynamic imports, Babel, with its babel-preset, acts as your interpreter:

{
  "plugins": ["syntax-dynamic-import"]
}

Consider it your babel fish, transmogrifying esoteric import() syntax into good old-fashioned JavaScript that even your grandma's computer can understand.

Harnessing module exports

Dynamic imports are magic, but you've got to know your spells. When the magic dust clears, to use a default export, summon it with module.default. For named exports, call out module.exportName.

// Default export 👀
let myModule = await import('my-module');
console.log(myModule.default); // Gotcha!

// Named export 🕵️‍♀️
let myModule = await import('my-module');
console.log(myModule.exportName); // Caught you red-handed!

Error handling and potential bumps

While dynamic imports bring snazzy features, be wary of a few road bumps:

Network delay: They're fetched over the network, so be patient!
Error handling: Keep your .catch() or try/catch catchers ready.
Parsing overhead: Those new chunky modules need some parsing and evaluating.

And as Dumbledore once said,

"Words are, in my not-so-humble opinion, our most inexhaustible source of magic."

import('module-name')
  .then(module => {
    // Handle module as if it owes you money 💸 
  })
  .catch(error => {
    // Always be ready for "He-who-must-not-load" 🚫 
  });

Considering alternative: conditional exports and partial loading

ES6 not your style or doesn't sit quite right? No worries, check out conditional exports or partial loading with require():

if (condition) {
  // Because sharing is caring, right?
  module.exports = require('module-a').partName;
} else {
  // Who said you can't have options in life?
  module.exports = require('module-b').partName;
}