JS - How to dynamically import a module await it and then export the module?

Question

I'm trying to dynamically import a module. But I'm not able to figure it out, how to export it correctly.

const calendarLocale = async () => await import(`./lang/calendar/${lang}`);

const messages = {
    [lang]: {
      ...calendarLocale()
    }
}

export default new VueI18n({
   locale: lang, // set locale
   messages, // set locale messages
});

Because it's asynchronous the value in messages is always empty.

I feel like stupid and I know that question was asked often, but I just cannot figure it out in my case. — Philipp Mochine, Oct 11 '18 at 18:38
do you want to reexport something taken from dynamic import? — skyboyer, Oct 11 '18 at 18:49
I don't see how it can be possible to do this without having the Promise itself be the thing you export, one way or another. — Pointy, Oct 11 '18 at 18:51
you cannot do this way. details: https://stackoverflow.com/questions/42958334/how-can-i-export-promise-result — skyboyer, Oct 11 '18 at 18:52

score 3 · Accepted Answer · answered Oct 11 '18 at 18:53

This is not possible - it would require top-level await, which currently is a proposal only.

All you can do is export a promise:

export default import(`./lang/calendar/${lang}`).then(calendarLocale => new VueI18n({
   locale: lang, // set locale
   messages: {
     [lang]: calendarLocale
   }, // set locale messages
}));

JS - How to dynamically import a module await it and then export the module?

1 Answers1