Dynamic locale import with Vite

[jbaldassari]

I've recently been working on migrating a project from Create React App to Vite, and one place where I got stuck was the dynamic import of date-fns locales. I finally found a couple of solutions, and since I haven't seen these anywhere else I thought I'd just post them here in case it helps anyone else.

Just for reference, this is how I was doing the imports with Webpack:

const imported = await import(
  /* webpackChunkName: "date-fns", webpackMode: "lazy-once" */ `date-fns/locale/${localeCode}/index.js`
);

Here localeCode is a variable containing the locale string, e.g. en-US, es, etc. This value is either automatically detected by a module or configured by the user. For that reason I can't just statically import a bunch of locales. I really want it to support loading arbitrary locales at runtime without bundling them all into the main chunk.

This was all working with CRA/Webpack, but after switching to Vite the dynamic imports were failing to load. I don't fully understand all the reasons why yet, but it seems like support for dynamic imports (particularly with variable components) is much more limited in Vite than Webpack. The first way I tried to get it working, which wasn't successful, was to dynamically load the locale directly out of node_modules:

// This does not work:
const imported = (await import(`../../../node_modules/date-fns/locale/${localeCode}/index.js`)).default;

This causes Vite to blow up with an error like:

Uncaught ReferenceError: require is not defined

I guess this happens because the code inside the locale module uses require, which isn't supported in Vite. There are a number of workarounds for this issue documented here, but they all seem fairly complex and brittle.

Eventually I figured out a couple of ways to make it work, but both of them have some serious drawbacks.

Solution 1: Import the individual locale via https://esm.sh or https://www.jsdelivr.com

const importedFromEsmSh = (await import(/* @vite-ignore */ `https://esm.sh/date-fns/locale/${localeCode}/index.js`)).default;
const importedFromJsdelivr = (await import(/* @vite-ignore */ `https://cdn.jsdelivr.net/npm/date-fns/locale/${resolvedLocaleCode}/+esm`)).default;

Instead of bundling the locales, we just fetch them dynamically at runtime from https://esm.sh or https://cdn.jsdelivr.net which are free services that cache node modules for this purpose.

Pros:

• We don't need to bundle the locales in our app
• We can pull in only the locale(s) we need

Cons:

• Importing via URL requires a node polyfill for the https module (e.g. https://github.com/davidmyersdev/vite-plugin-node-polyfills)
• Adds a dependency on a third-party service you don't control. Will it always be around? Will it always be free? How is its reliability?
• Is this a good idea from a security perspective? What if this site starts injecting malware in the modules it serves?

Solution 2: Importing all locales dynamically

This solution involves loading a single default locale via a static import, and then if the locale changes to something that is not the default, we load all locales and then extract the requested locale. It would look something like this:

import enUS from 'date-fns/locale/en-US';

const DefaultLocale = enUS;

// Cache the imported locales so that we only have to load them once:
let allLocalesImport: Promise<typeof import('date-fns/locale')> | undefined;

async function importLocale(localeCode: string): Promise<Locale> {
  let imported = DefaultLocale;
  if (!allLocalesImport) {
    allLocalesImport = import('date-fns/locale');
  }
  const allLocales = await allLocalesImport;
  // When extracting the locale we need to use the form without a hyphen, e.g. enGB instead of en-GB:
  const normalizedLocaleCode = localeCode.replaceAll('-', ''); 
  const maybeLocale = allLocales[normalizedLocaleCode as keyof typeof allLocales];
  if (maybeLocale) {
    imported = maybeLocale as Locale;
  } else {
    console.warn(`Locale ${localeCode} not found; falling back to ${DefaultLocale.code}`);
  }
  return imported;
}

Pros:

• Does not depend on any external services

Cons:

• Impacts chunk size because all locales need to be bundled
• If a user's locale is not the default locale, we have to load all locale,s which could lead to a poor user experience

So far these are the only solutions I've found that work with Vite. I'm interested in hearing if anyone else has found a better way to dynamically import individual locales.