Fixes blank screen in browsers that don't support `Intl.DisplayNames` (#36847)

app/javascript/mastodon/features/about/components/rules.tsx

@@ -169,9 +169,13 @@ const localeOptionsSelector = createSelector(
       },
     };
     // Use the default locale as a target to translate language names.
-    const intlLocale = new Intl.DisplayNames(intl.locale, {
-      type: 'language',
-    });
+    const intlLocale =
+      // Intl.DisplayNames can be undefined in old browsers
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      Intl.DisplayNames &&
+      (new Intl.DisplayNames(intl.locale, {
+        type: 'language',
+      }) as Intl.DisplayNames | undefined);
     for (const { translations } of rules) {
       for (const locale in translations) {
         if (langs[locale]) {
@@ -179,7 +183,7 @@ const localeOptionsSelector = createSelector(
         }
         langs[locale] = {
           value: locale,
-          text: intlLocale.of(locale) ?? locale,
+          text: intlLocale?.of(locale) ?? locale,
         };
       }
     }

app/javascript/mastodon/initial_state.ts

@@ -129,17 +129,21 @@ export const statusPageUrl = getMeta('status_page_url');
 export const sso_redirect = getMeta('sso_redirect');
 export const termsOfServiceEnabled = getMeta('terms_of_service_enabled');
 
-const displayNames = new Intl.DisplayNames(getMeta('locale'), {
-  type: 'language',
-  fallback: 'none',
-  languageDisplay: 'standard',
-});
+const displayNames =
+  // Intl.DisplayNames can be undefined in old browsers
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  Intl.DisplayNames &&
+  (new Intl.DisplayNames(getMeta('locale'), {
+    type: 'language',
+    fallback: 'none',
+    languageDisplay: 'standard',
+  }) as Intl.DisplayNames | undefined);
 
 export const languages = initialState?.languages.map((lang) => {
   // zh-YUE is not a valid CLDR unicode_language_id
   return [
     lang[0],
-    displayNames.of(lang[0].replace('zh-YUE', 'yue')) ?? lang[1],
+    displayNames?.of(lang[0].replace('zh-YUE', 'yue')) ?? lang[1],
     lang[2],
   ];
 });