I am lazy loading timeago language strings, when i had only one language i had one import + the buildFormatter :

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

And this is how i display the date in the app

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

But now that i have 3 languages, i had to use the lazy loading :

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

I am getting the used language from the HTML file and using it with props

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

To put the current language strings in the formatter i have added a switch condition, i am not sure if i really need this condition!

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

const formatter = buildFormatter(Strings);

The formatter is not working, and im not sure if the import are correct