fix: fix name of webpack chunk for intl polyfill (#2001)

* fix: fix name of webpack chunk for intl polyfill

* fix: fix typo

src/routes/_utils/polyfills/asyncPolyfills.js

@@ -7,10 +7,33 @@ export const importFocusVisible = () => import(
   /* webpackChunkName: '$polyfill$-focus-visible' */ 'focus-visible'
 )
 
-export const importRelativeTimeFormat = () => import(
+export const importIntlLocale = () => import(
-  /* webpackChunkName: '$polyfill$-relative-time-format' */ './relativeTimeFormatPolyfill'
+  /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-locale/polyfill'
 )
 
-export const importListFormat = () => import(
+export const importIntlPluralRules = async () => { // has to be imported serially
-  /* webpackChunkName: '$polyfill$-list-format' */ './listFormatPolyfill'
+  await import(
+    /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-pluralrules/polyfill'
   )
+  await import(
+    /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-pluralrules/locale-data/en'
+  )
+}
+
+export const importIntlRelativeTimeFormat = async () => { // has to be imported serially
+  await import(
+    /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-relativetimeformat/polyfill'
+  )
+  await import(
+    /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-relativetimeformat/locale-data/en'
+  )
+}
+
+export const importIntlListFormat = async () => { // has to be imported serially
+  await import(
+    /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-listformat/polyfill'
+  )
+  await import(
+    /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-listformat/locale-data/en'
+  )
+}

src/routes/_utils/polyfills/listFormatPolyfill.js

@@ -1,7 +0,0 @@
-// Thank you Safari
-// https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat#browser_compatibility
-// Also note I'm not going to do anything fancy here for loading the polyfill locale data.
-// Safari can just get English every time.
-
-import '@formatjs/intl-listformat/polyfill'
-import '@formatjs/intl-listformat/locale-data/en'

src/routes/_utils/polyfills/loadPolyfills.js

@@ -1,17 +1,28 @@
 import {
-  importRequestIdleCallback,
+  importIntlListFormat,
-  importRelativeTimeFormat,
+  importIntlLocale, importIntlPluralRules, importIntlRelativeTimeFormat,
-  importListFormat
+  importRequestIdleCallback
 } from './asyncPolyfills'
 
+async function loadIntlPolyfillsIfNecessary () {
+  // Have to chain these so that they load in the proper order.
+  // Luckily these requests aren't done in serial, because we're using the same Webpack
+  // chunk name for each one.
+  if (typeof Intl.Locale !== 'function') {
+    await importIntlLocale()
+  }
+  if (typeof Intl.PluralRules !== 'function') {
+    await importIntlPluralRules()
+  }
+  await Promise.all([
+    typeof Intl.RelativeTimeFormat !== 'function' && importIntlRelativeTimeFormat(),
+    typeof Intl.ListFormat !== 'function' && importIntlListFormat()
+  ])
+}
+
 export function loadPolyfills () {
   return Promise.all([
     typeof requestIdleCallback !== 'function' && importRequestIdleCallback(),
-    (
+    loadIntlPolyfillsIfNecessary()
-      typeof Intl.RelativeTimeFormat !== 'function' ||
-      typeof Intl.Locale !== 'function' ||
-      typeof Intl.PluralRules !== 'function'
-    ) && importRelativeTimeFormat(),
-    typeof Intl.ListFormat !== 'function' && importListFormat()
   ])
 }

src/routes/_utils/polyfills/relativeTimeFormatPolyfill.js

@@ -1,12 +0,0 @@
-// Making this a single module so it gets bundled into a single chunk.
-// As it turns out, thanks to iOS 13, we need to not only support Intl.RelativeTimeFormat, but
-// also Intl.Locale and Intl.PluralRules. When iOS 13 is not so widespread, we can remove this.
-// Also note I'm not going to do anything fancy here for loading the polyfill locale data.
-// iOS 13 can just get English every time.
-// https://caniuse.com/mdn-javascript_builtins_intl_relativetimeformat
-
-import '@formatjs/intl-locale/polyfill'
-import '@formatjs/intl-pluralrules/polyfill'
-import '@formatjs/intl-pluralrules/locale-data/en'
-import '@formatjs/intl-relativetimeformat/polyfill'
-import '@formatjs/intl-relativetimeformat/locale-data/en'