How to dynamic import locales?

[koen-dev]

Let me start of by saying I am not good/strong with Promises and this is probably the biggest issue why I can't seem to make it work.

I'm trying to dynamically import the used locales for formatting dates together with i18next. I keep running into issues trying to achieve this. Here is a little background about the project I am working in:

• TypeScript
• React
• i18next + i18next-react
• date-fns

I followed the instructions from webpack.md but I run into the issue that date-fns expects type Locale instead of Promise<any>. Now I do understand why this happens as the dynamic import returns a Promise. I just can't figure out how to make it work. I ran into the fact that when I use date-fns/locale/${locale}/index.js I first need to access .default to get the actual module. Also makes sense but trying to use it with i18next I lose it especially because I can't return the promise there or use a asynchronous function. Very frustrating as I also struggle to completely understand the whole Promise and async situation.

I want to achieve something like this:

const getLocale = (locale) => import(`date-fns/locale/${locale}/index.js`) 

i18next
    .init({
        interpolation: {
            format: (value, format = "", lng = "en") => {
                if (isDate(value)) {
                    if (format === "relative") {
                        return formatRelative(value, new Date(), { 
                            locale: getLocale(lng),
                        });
                    }
                    return formatDate(value, format, { 
                        locale: getLocale(lng),
                    });
                }
                return value;
            },
            escapeValue: false,
        },
    });

[suadsuljovic]

If getLocale is a promise you can't get values from it like your doing in your code. You need to write something like this:
getLocale(lng).then((result) => {return result});
The reasone for this is that getLocale(ing) reference is to a promise not the result of that promise.

edit: Or a better answer is just to add await in front of getLocale(lng). Like this await getLocale(lng).