React i18next not working on Firefox/Microsoft Edge browser?

Question

I am using React i18next library for localization in my application. Everything works fine when using the library on localhost, but when I produce a production build, the application opens only on Chrome browser. Here is the code that I have used:

import i18n from "i18next";
import Backend from "i18next-xhr-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

import translationEN from './locales/en/translation.json';
import translationDE from './locales/de/translation.json';

// the translations
const resources = {
  en: {
    translation: translationEN
  },
  de: {
    translation: translationDE
  }
};

i18n
  .use(Backend)
  // detect user language
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    load: "languageOnly",
    resources,
    fallbackLng: "de",
    debug: true,
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

On Firefox browser, I do see that in the console it says i18next: languageChanged en-US whereas on chrome it says i18next: languageChanged en, which is the correct format. I am using load: "languageOnly" option.

Any suggestions are appreciated. Thank you.

Answer 1

this (cleanCode) worked for me.'en-US' is set as 'en' in Firefox. See docs docs for details.

.init({
    ...
    nonExplicitSupportedLngs: false,
    cleanCode: true,
  });