Next.js Discord

Discord Forum

Help with Polyfilling, executing own code client side

Unanswered
American Crocodile posted this in #help-forum
Open in Discord
American CrocodileOP
I'm trying to polyfill a locale, most of our users will be icelandic and a large portition of them use chromium. Chromium doesn't support icelandic locale.
I need to be able to render numbers and dates based on Locale and I'm using next-intl currently.

Problem is getting the locale to load. I have this code that seems to work, but note that it has an important import order.

import { shouldPolyfill } from '@formatjs/intl-numberformat/should-polyfill';

export async function polyfillIntl(locale: string) {
  const unsupportedLocale = shouldPolyfill(locale);

  // This locale is supported
  if (!unsupportedLocale) {
    return;
  }

  try {
    // Load the polyfill 1st BEFORE loading data
    await import('@formatjs/intl-numberformat/polyfill-force');
    await import(`@formatjs/intl-numberformat/locale-data/${unsupportedLocale}`);
    await import('@formatjs/intl-datetimeformat/polyfill-force');

    // Parallelize CLDR data loading
    const dataPolyfills = [
      import('@formatjs/intl-datetimeformat/add-all-tz'),
      import(`@formatjs/intl-datetimeformat/locale-data/${unsupportedLocale}`),
    ];
    await Promise.all(dataPolyfills);

    console.log(`Intl polyfills loaded for locale: ${unsupportedLocale}`);
  } catch (error) {
    console.error('Failed to load Intl polyfills:', error);
  }
}


polyfillIntl('is') before interactive should do the trick.

I'm fine if it also runs for users that have other languages if that is what it takes.

How could I run this code beforeInteractive on the clientside. The nextjs version is before 15.3 so no instrumentation-client.ts

0 Replies