Soy perezoso al cargar cadenas de idioma de hace tiempo, cuando solo tenía un idioma, tenía una importación + el buildFormatter:

 import frenchStrings from 'react-timeago/lib/language-strings/fr'; import buildFormatter from 'react-timeago/lib/formatters/buildFormatter'; const formatter = buildFormatter(frenchStrings);

Y así es como muestro la fecha en la aplicación.

 <TimeAgo date={data.date} formatter={formatter} />

Pero ahora que tengo 3 idiomas, tuve que usar la carga diferida:

 import TimeAgo from 'react-timeago'; import React from 'react'; let langString; if (locale === 'en') { langString = React.lazy(()=>import('react-timeago/lib/language-strings/en')); } else if (locale === 'nl') { langString = React.lazy(()=> import('react-timeago/lib/language-strings/nl')); } else { langString = React.lazy(()=>import('react-timeago/lib/language-strings/fr')); }

Obtengo el idioma usado del archivo HTML y lo uso con accesorios

 const TheLocale = root_el.getAttribute("data-locale");

Para poner las cadenas de idioma actuales en el formateador, he agregado una condición de cambio, ¡no estoy seguro de si realmente necesito esta condición!

 let Strings; switch(TheLocale) { case 'en': { Strings = englishStrings; break; } case 'nl': { Strings = dutchStrings; break; } default: Strings = frenchStrings; } const formatter = buildFormatter(Strings);

El formateador no funciona y no estoy seguro de si la importación es correcta.