I am working with this library https://github.com/unicode-cldr/cldr-localenames-modern in order to get a list of countries. Some of them have special characters that for some reason the browsers (Chrome and FF) are not rendering properly.

I created this codesandbox https://codesandbox.io/s/zen-jackson-qt9i46?file=/src/App.js where I am using the exact same code that the library is using. Weirdly, in the codesandbox there are no issues at all.

This is the list of countries => https://github.com/unicode-cldr/cldr-localenames-modern/blob/master/main/en/territories.json

On this function I tried 2 different things:

const sortCountryOptions = (options) => {
  return Object.keys(options)
    .filter(key => key.length === 2 && !['EU', 'EZ', 'UN', 'XA', 'XB', 'ZZ'].includes(key))
    .sort((a, b) => {
      const an = (Array.isArray(options[a])) ? options[a][0] : options[a];
      const bn = (Array.isArray(options[b])) ? options[b][0] : options[b];
      return an < bn ? -1 : (an > bn ? 1 : 0);
    })
    .reduce((obj, key) => {
      obj[key] = options[key];
      return obj;
    }, {});
};

const cldr = () => {
  const list = cldrLocaleNames.main.en.localeDisplayNames.territories;
  // when I call this list, I am getting the bad characters. 
  return sortCountryOptions(list);
};

I changed this an < bn ? -1 : (an > bn ? 1 : 0) to this an.localeCompare(bn) but the same keeps going.

On the screenshot below you can check on every column, the name in the middle of each, have problems.

I do not know if this could be something wrong with a webpack config, also, when I deploy to another environment, the error is gone or just different.

And actually the problem is not by the time I render the objects because I detected that this issue on my project happens exactly here: const list = cldrLocaleNames.main.en.localeDisplayNames.territories;

Any ideas?