Help with Polyfilling, executing own code client side
Unanswered
American Crocodile posted this in #help-forum
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.
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
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