'react-18n not loading from the changed path if the changeLanguage is triggered

Config looks like

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-chained-backend";
import HttpBackend from "i18next-http-backend";
import {APP_S3_HOST,EnvStage } from "./constants";
import FsBackend from "i18next-fs-backend";

export enum Languages {
  en = "en-US",
  dede = "de-DE",
  esXN = "es-XN",
  fiFI = "fi-FI",
  frfr = "fr-FR",
  itIT = "it-IT",
  jajp = "ja-JP",
  ptBR = "pt-BR",
  svSE = "sv-SE",
  zhcn = "zh-CN"
}

i18n
  .use(Backend) // passes i18n down to react-i18next
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    react: { useSuspense: false },
    cleanCode: true,
    supportedLngs: [ "en", "en-US","de-DE", "es-XN", "fi-FI", "fr-FR","it-IT", "ja-JP", "pt-BR","sv-SE", "zh-CN"],
    debug: process.env.REACT_APP_STAGE == EnvStage.DEV, // debug messages, shows missing keys etc
    backend: {
      backends: [HttpBackend,  FsBackend],
      backendOptions: [
        {
          loadPath: (lng: string) => {
            return ["en", "en-US"].includes(lng) ? `${APP_S3_HOST}/templates/${lng}.json` : `${APP_S3_HOST}/translations/${Languages[lng]}.json`;
          }
        },
        {
          loadPath: './i18n/en.json'
         }
      ]
    },
    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

export default i18n;

When changeLanguage method is triggered which looks as follows:

const changeLanguage = (language: Languages) => async dispatch => {
  await i18n.changeLanguage(language);
  dispatch({ type: GeneralActionType.CHANGE_LANGUAGE, payload: language });
};

i18n continues to look into templates folder instead of translations folder. Why does that seem to be the case when loadPath has the correct loading logic

    loadPath: (lng: string) => {
        return ["en", "en-US"].includes(lng) ? `${APP_S3_HOST}/templates/${lng}.json` : `${APP_S3_HOST}/translations/${Languages[lng]}.json`;
      }

If I select "fr-FR" language, it says:

GET FAILED S3BUCKET/templates/fr-FR.json

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'react-18n not loading from the changed path if the changeLanguage is triggered

Sources

Related Questions