nextjs - 💡(How to fix) Fix Docs: Polyfills are not awaited [10 comments, 2 participants]

console.warn('IntlGetcanonicallocales is not polyfilled'); console.warn('IntlLocale is not polyfilled');

TL;DR

To ensure that code with unsupported features is not executed before polyfills are loaded, consider awaiting the polyfill imports before executing the code.

Guidance

• Verify that the polyfill imports are properly awaited in the instrumentation-client.ts file to prevent execution of unsupported features.
• Review the performance considerations section in the Next.js documentation to optimize the polyfill loading process.
• Consider adding error handling for cases where the polyfills fail to load or are not supported.
• Check the browser support for the Intl.Locale and Intl.getCanonicalLocales features to determine if polyfills are necessary.

Example

if (shouldPolyfillLocale()) {
    if (shouldPolyfillGetcanonicallocales()) {
        const getCanonicalLocalesPolyfill = await import('@formatjs/intl-getcanonicallocales/polyfill');
        console.log('IntlGetcanonicallocales is polyfilled');
    } else {
        console.warn('IntlGetcanonicallocales is not polyfilled');
    }
    const localePolyfill = await import('@formatjs/intl-locale/polyfill');
    console.log('IntlLocale is polyfilled');
} else {
    console.warn('IntlLocale is not polyfilled');
}

Notes

The provided code snippet seems to be correctly awaiting the polyfill imports, but the issue might be related to the timing of the execution or the browser support for the features.

Recommendation

Apply workaround: Ensure that all code that uses unsupported features is executed after the polyfills have been loaded, by awaiting the polyfill imports or using a callback function to execute the code after the polyfills have been loaded.