Loading namespace translation loads only default language, not fallback language about i18next-http-backend HOT 9 CLOSED

The problem is probably const prodLoadPath = getCdnUrl(${path}/${locale}.json);. This line of code is not executed again when the locale changed? So if the value of that locale variable is initialized with ja, it will always only load ja translations. And since you have "http://127.0.0.1:3000/src/i18n/locales/{{lng}}.json" in dev when working locally, it works. So it does not work only when deployed.
The loadPath should always include {{lng}}.

from i18next-http-backend.

Would the addPath not load the hardcoded en.json in addition here?

const addPath = isDev
  ? "http://127.0.0.1:3000/src/i18n/locales/en.json"
  : getCdnUrl(`${path}/en.json`);

The locale is set on page load and is not changed again. However, I would expect the fallbackLng to also be imported, in the case of missing strings in the non-English translation files (we usually have a few days' lag time for getting back translations for non-en locales, so I need the fallbackLng loaded as well).

from i18next-http-backend.

The addPath is only used for missingKeys... when saveMissing is set to true => https://www.i18next.com/overview/configuration-options#missing-keys (this has nothing to do with loading)

Regarding the fallback loading, yes that should work when setting the fallbackLng option. => https://www.i18next.com/principles/fallback#fallback-to-different-languages
You may check if there are other warnings in your console output.
Also make sure the key containers.LeftPanel.ResourceView.component really exists.

from i18next-http-backend.

I've confirmed the keys exist and are correct.

So I now have this as my options, with saveMissing now set to true:

const loadPath = isDev
  ? "http://127.0.0.1:3000/src/i18n/locales/{{lng}}.json"
  : prodLoadPath;

const addPath = isDev
  ? "http://127.0.0.1:3000/src/i18n/locales/en.json"
  : getCdnUrl(`${path}/en.json`);

void i18nInstance
  .use(Backend)
  .use(initReactI18next)
  .init<HttpBackendOptions>({
    // https://github.com/i18next/i18next-http-backend#backend-options
    backend: {
      loadPath,
      addPath,
    },
    lng: locale,
    fallbackLng,
    debug: true, // set to `true` to debug locally
    returnNull: false,
    saveMissing: true,
    react: {
      // react-i18next options
      useSuspense: true,
    },
    interpolation: {
      escapeValue: false, // not needed for React as it escapes by default
    },
  } as InitOptions);

But I'm still seeing the en strings actually being ja, despite the correct paths here:

from i18next-http-backend.

Ah, ok, I did just notice this error:

I don't understand why it's failing to fetch the en.json file when it gets the ja.json file from the exact same URL just file.

from i18next-http-backend.

Check your network tab and check the translation requests and responses... There might still be some issue in your setup. Maybe also your CORS setup.
Not easy to help without a reproducible example.
I can just say and confirm i18next and i18next-http-backend works as expected.
There's not much I can help with more than that, sorry...

from i18next-http-backend.

Thanks @adrai, you helped me narrow down the problem and at least confirm that the setup is correct and it's something about my env. Thank you!

from i18next-http-backend.

Hey @bildungsroman can you tell me how to fix this issue ? I am facing the exact same issue and not able to debug it further.

from i18next-http-backend.

It was an issue with our CDN @ajitesh13. Here is my currently working code:

export function loadI18n(logger: ILogger, locale: Locale, loadPath: string) {
  const i18nInstance = createInstance();
  const fallbackLng: Locale = "en";

  void i18nInstance
    .use(Backend)
    .use(initReactI18next)
    .init({
      // https://github.com/i18next/i18next-http-backend#backend-options
      backend: {
        loadPath, // "src/i18n/locales/{{lng}}.json";
        addPath: (lng: string, namespace: string) => {
          logError(logger, `Missing locale ${lng} for namespace ${namespace}`);
        },
      },
      load: "currentOnly",
      lng: locale,
      fallbackLng,
      debug: false, // set to `true` to debug locally
      returnNull: false,
      react: {
        useSuspense: false,
      },
      interpolation: {
        escapeValue: false, // not needed for react
      },
    } as InitOptions);
  return i18nInstance;
}

from i18next-http-backend.