How do I dynamically import locales?

[SleeplessOne1917]

See this issue for context.

I set up the formatter like so:

import setDefaultOptions from "date-fns/setDefaultOptions";
import { I18NextService } from "../../services";

export default async function () {
  let lang = I18NextService.i18n.language;
  if (lang === "en") {
    lang = "en-US";
  }

  const locale = (
    await import(
      /* webpackExclude: /\.js\.flow$/ */
      `date-fns/locale/${lang}`
    )
  ).default;
  setDefaultOptions({
    locale,
  });
}

You can see the error in the attached PR, and I can provide more information if needed.

[joaopedrodcf]

On v2 it works like this for me:

import { setDefaultOptions } from 'date-fns';
...

export const loadDateFnsLocale = async (locale: Locale) => {
    return await import(
        `date-fns/locale/${localeToDateFnsLocale[locale]}/index.js`
    );
};

export const useDateFnsLocale = () => {
   const {data} = loadDateFnsLocale('en-US'); // Example

    if (data) {
        setDefaultOptions({ locale: data.default });
    }

   ...
};

So basically seems you missed the index.js on your import

[sshmyg]

Bundler like webpack or so includes all locales into final bundle, so this is not an option.
To avoid this you have to know all locales you will use, and create something lile a map for it, that bunlder creates chunk for each.

[zrachko]

const checkLocale = async (lang: string) => {
    const {[lang]: locale} = await import(`date-fns/locale`);
    if (locale) {
        registerLocale(lang, locale)
        setDefaultLocale(lang);
    }
}