DEV Community

Cover image for ES-Next dynamic import
Nathaniel
Nathaniel

Posted on • Edited on

ES-Next dynamic import

#javascript #esnext #import #dynamic

Problem

Recently when writing a project of mine, I've written some javascript like this:

import itemA from '../items/itemA';
import itemB from '../items/itemB';
import itemC from '../items/itemC';
import itemD from '../items/itemD';
Enter fullscreen mode Exit fullscreen mode

I'd really like some syntax like this:

for(const id of ['A','B','C','D']) {
    import (item+id) from '../items/item' + id;
}
Enter fullscreen mode Exit fullscreen mode

Turned out there's this stage 4 proposal of ECMAScript called dynamic import that goes like:

(async () => {
  await import('./my-app.mjs');
})();
Enter fullscreen mode Exit fullscreen mode

and it's supported by all modern browsers as well as node.

Failed Attempt

Then I went on writing some line code like this:

importedItems = await Promise.all(
  itemNames.map(async itemName => {
    try {
      const imported = await import(`../items/${itemName}`);
      logger.debug(`Imported item: ${itemName}`);
      return imported;
    } catch (err) {
      logger.warning(`Failed to import item: ${itemName}`);
      return null;
    }
  })
);
Enter fullscreen mode Exit fullscreen mode

But for later use of importedItems, a TypeError has been raised stating that the importedItems are actually type of Module instead of expected item. I tried manual type casting like this:

return Item(imported);
Enter fullscreen mode Exit fullscreen mode

But it didn't work and since it's not yet standardized feature (Due to be standardized in ECMAScript 2020), there's little information about it so I have to figure it out myself.

After a long time with JSON.stringify() and console.log I finally figured it out.

Solution

It should work like this:

return imported.default;
Enter fullscreen mode Exit fullscreen mode

Full working snippet

importedItems = await Promise.all(
  itemNames.map(async itemName => {
    try {
      const imported = await import(`../items/${itemName}`);
      logger.debug(`Imported item: ${itemName}`);
      return imported.default;
    } catch (err) {
      logger.warning(`Failed to import item: ${itemName}`);
      return null;
    }
  })
);
Enter fullscreen mode Exit fullscreen mode

Reason

The reason is that when we use an import statement like this:

import item from './itemA';
Enter fullscreen mode Exit fullscreen mode

it automatically loads the default export of module 'itemA' into the item.

But when we do expression like dynamic import like this:

(async () => {
  const item = await import('./itemA');
})();
Enter fullscreen mode Exit fullscreen mode

the item is a Module , by accessing Module.default we are able to fetch its default export, same goes for any other exports.

originally posted on: https://blog.llldar.io/Article/View/44

Top comments (2)

Collapse
 
aminnairi profile image
Amin • • Edited

Let's say I have three modules.

$ touch {main,fibonacci,luhn}.mjs

// fibonacci.mjs
function fibonacci(number, oldFibonacci = 1) {
  if (number <= 1) {
    return oldFibonacci
  }

  return fibonacci(number - 1, oldFibonacci * number)
}

export default fibonacci

// luhn.mjs
function luhn(number) {
  return Array.from(number.toString()).reduce(function(sum, digit, index) {
    if (index % 2 === 0) {
      return sum + digit
    }

    const doubled = digit * 2

    if (doubled > 9) {
      return sum + (doubled - 9)
    }

    return sum + doubled
  }, 0) % 10 === 0
}

export default luhn

We could write an intermediary function that will return the default exported module out of a dynamic imported one.

// main.mjs
function importDefault(path) {
  return import(path).then(function(module) {
    return module.default
  })
}

Promise.all([
  importDefault("./fibonacci.mjs"),
  importDefault("./luhn.mjs")
]).then(function([ fibonacci, luhn ]) {
  console.log(fibonacci(5)) // 120
  console.log(luhn(732829320)) // true
  console.log(luhn(732829321)) // false
})

Of course, you can import named exported modules as well like usual.

// main.mjs
Promise.all([
  importDefault("./fibonacci.mjs"),
  importDefault("./luhn.mjs"),
  import("fs")
]).then(function([ fibonacci, luhn, { writeFile } ]) {
  console.log(fibonacci(5)) // 120
  console.log(luhn(732829320)) // true
  console.log(luhn(732829321)) // false

  writeFile("test.txt", "hello world!", function(error) {
    if (error) {
      console.error("test file error")
    } else {
      console.log("test file written")
    }
  })
})

N.B.: if you want to test this code, you'll have to run this command with a compliant version of Node.js supporting experimental modules.

$ node --experimental-modules ./main.mjs
Collapse
 
natelindev profile image
Nathaniel •

Nice complement, I didn't mention I was using esm. If anyone want to use the import export without having to name your file .mjs on node, try it out.

Read next

rawas_aditya profile image

Understanding the Barrel Pattern in JavaScript/TypeScript

Aditya Rawas -

kaankaya profile image

Dirty Code: Simple Rules to Avoid It

Kaan Kaya -

rahulgithubweb profile image

LeetCode Challenge: 135. Candy - JavaScript Solution 🍬

Rahul Kumar Barnwal -

msm8 profile image

Building Composable Platforms with Harmony

John Brooks -