Disable i18next falling back to "parent" key when missing translation

Question

I'm working on a project that uses i18next, react-i18next and i18next-http-backend. There are two namespaces: common which are translations stored in the app, and db, which is fetched from backend. The init looks like this:

i18n
  .use(LanguageDetector)
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    react: {
      useSuspense: false,
    },
    fallbackLng: (code) => getLanguageCode(code),
    ns: ["common", "db"],
    defaultNS: "common",
    fallbackNS: false,
    lowerCaseLng: true,
    cleanCode: true,
    debug: Settings.DEBUG_I18NEXT,
    resources,
    backend: {
      loadPath: `${Settings.API_BASE_HOST}/admin/api/translations/{{lng}}.json`,
    },
  })
  .then(() => i18n.reloadResources(null, ["db"], () => {}));

The problem is that when I have two db keys such as kp.key and kp.key.subkey, where the first has a translation in the selected language, but the second does not, t("kp.key.subkey") is translated to the translation of kp.key instead of returning its own default value (key, empty string or whatever..)

How can I make it NOT do this?!?!? I feel like I've messed around with every possible option found here: https://www.i18next.com/overview/configuration-options without any luck. One thing complicating the issue is that the translations in common are nested JSON structures while the db keys are returned as a flat JSON object with the key names being strings generally using '.' as a separator, but it's a bit late to change this now..

Disable i18next falling back to "parent" key when missing translation

0 Answers0