Conditional import or alternative in JavaScript (ReactJS WebApp)?

Question

I\'m implementing internationalization for a ReactJS webapp. How can I avoid loading all language files?

import ru from \'./ru\';
import en from \'./en\';

         


        

Answer 1

Unfortunately there is no way to dynamically load modules in ES6.

There is an upcoming HTML Loader Spec which will allow for this functionality, so you could use a polyfill in order to use that.

const chooseLang = () => System.import(`./${language}`);
export default chooseLang;

However, this would now be promise-based so it would need to be called like so:

import language from "./language";
language.chooseLang().then(l => {
    console.log(l);
});

But bear in mind, that spec could change radically (or be dropped altogether).

Another alternative would be to not store your localizations as Javascript modules, but as JSON instead, e.g.

en.json

{ "hello_string": "Hi!" }

language.js

const chooseLang = () => {
    return fetch(`./${language}.json`)
        .then(response => response.json());
};

Again, this would be promise based so would need to be accessed as such:

import language from "./language";
language.chooseLang().then(l => {
    console.log(l.hello_string);
});

That solution would be fully ES6-compliant and would not rely on possible future features.