Estoy trabajando con esta biblioteca https://github.com/unicode-cldr/cldr-localenames-modern para obtener una lista de países. Algunos de ellos tienen caracteres especiales que, por alguna razón, los navegadores (Chrome y FF) no muestran correctamente.

Creé este codesandbox https://codesandbox.io/s/zen-jackson-qt9i46?file=/src/App.js donde estoy usando exactamente el mismo código que usa la biblioteca. Extrañamente, en la caja de códigos no hay ningún problema.

Esta es la lista de países => https://github.com/unicode-cldr/cldr-localenames-modern/blob/master/main/en/territories.json

En esta función probé 2 cosas diferentes:

 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); };

Cambié esto an < bn ? -1 : (an > bn ? 1 : 0) a este an.localeCompare(bn) pero sigue igual.

En la captura de pantalla a continuación, puede verificar en cada columna, el nombre en el medio de cada uno, tiene problemas.

No sé si esto podría ser un problema con la configuración de un paquete web, además, cuando implemento en otro entorno, el error desaparece o simplemente es diferente.

Y en realidad, el problema no es cuando renderizo los objetos porque detecté que este problema en mi proyecto ocurre exactamente aquí: const list = cldrLocaleNames.main.en.localeDisplayNames.territories;

¿Algunas ideas?