Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

413
Views
ES6 variable import name in node.js?

is it possible to import something into module providing variable name while using ES6 import?

I.e. I want to import some module at a runtime depending on values provided in a config:

import something from './utils/' + variableName;
over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Not with the import statement. import and export are defined in such a way that they are statically analyzable, so they cannot depend on runtime information.

You are looking for the loader API (polyfill), but I'm a bit unclear about the status of the specification:

System.import('./utils/' + variableName).then(function(m) {
  console.log(m);
});
over 4 years ago · Santiago Trujillo Report

0

Whilst this is not actually a dynamic import (eg in my circumstance, all the files I'm importing below will be imported and bundled by webpack, not selected at runtime), a pattern I've been using which may assist in some circumstances is:

import Template1 from './Template1.js';
import Template2 from './Template2.js';

const templates = {
  Template1,
  Template2
};

export function getTemplate (name) {
  return templates[name];
}

or alternatively:

// index.js
export { default as Template1 } from './Template1';
export { default as Template2 } from './Template2';


// OtherComponent.js
import * as templates from './index.js'
...
// handy to be able to fall back to a default!
return templates[name] || templates.Template1;

I don't think I can fall back to a default as easily with require(), which throws an error if I try to import a constructed template path that doesn't exist.

Good examples and comparisons between require and import can be found here: http://www.2ality.com/2014/09/es6-modules-final.html

Excellent documentation on re-exporting from @iainastacio: http://exploringjs.com/es6/ch_modules.html#sec_all-exporting-styles

I'm interested to hear feedback on this approach :)

over 4 years ago · Santiago Trujillo Report

0

There is a new specification which is called a dynamic import for ES modules. Basically, you just call import('./path/file.js') and you're good to go. The function returns a promise, which resolves with the module if the import was successful.

async function importModule() {
   try {
      const module = await import('./path/module.js');
   } catch (error) {
      console.error('import failed');
   }
}

Use cases

Use-cases include route based component importing for React, Vue etc and the ability to lazy load modules, once they are required during runtime.

Further Information

Here's is an explanation on Google Developers.

Browser compatibility (April 2020)

According to MDN it is supported by every current major browser (except IE) and caniuse.com shows 87% support across the global market share. Again no support in IE or non-chromium Edge.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!