Intil.DisplayNames() undefined in Safari version < 14.1

Question

The Intl.Displaynames() constructor enables the translation of language, region and script display names in Javascript.

Unfortunately, this is not supported in Safari versions < 14.1. (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames#browser_compatibility).

How to make this work in older Safari versions?

Answer 1

We can use polyfills (see https://formatjs.io/docs/polyfills/intl-displaynames/) to make this work in older Safari versions.

Add the following polyfills to your code to make the Intl.DisplayNames() constructor work as expected:

// the actual polyfills:
require('@formatjs/intl-locale/polyfill');
require('@formatjs/intl-displaynames/polyfill');
// the locale data of the languages that you need to support:
require('@formatjs/intl-displaynames/locale-data/de');
require('@formatjs/intl-displaynames/locale-data/en');

This requires the following dependencies:

"@formatjs/intl-displaynames"
"@formatjs/intl-getcanonicallocales"
"@formatjs/intl-locale"

After that, the constructor should be polyfilled and is ready to use. E.g.:

const translatedRegionNames = new Intl.DisplayNames(['en'], {type: 'region'});
...
const translatedCountryName = translatedRegionNames.of('US')