LoadPath doesn't change correctly with the language code

[s1mrankaur]

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

[adrai]

Can you provide a reproducible example please?

[adrai]

This seems to work here: https://codesandbox.io/s/staging-cloud-scpvr7?file=/src/index.js

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.