parseMissingKeyHandler does not include nameSpace

[laurib]

💥 Regression Report

parseMissingKeyHandler key does not include nameSpace even when appendNamespaceToMissingKey: true

Last working version

I don't know what version it worked but i noticed in latest versions that it does not include namespace in missing key anymore

Expected behavior

Missing key should include namespace when appendNamespaceToMissingKey: true

Other

I'm using useTranslations

const { t } = useTranslations(['payment']);
<div>{t('payment:title)}</div>

and parseMissingKeyHandler missingkey is 'title' not 'payment:title' as it used to be. Not sure if it is related to react-i18next or i18next

[adrai]

As the function name says, parseMissingKeyHandler will just get the key....
payment:title is not the key, title is the key
Maybe the missingKeyHandler is the option you are looking for?

[laurib]

But it used to include namespace when appendNamespaceToMissingKey was enabled.
I use parseMissingKeyHandler to search translation from resource object in dev env. That is why i need namespace also.

[adrai]

Sorry, can you describe better your use case?

[laurib]

Basically in our app there are translation files that we deploy to localazy for i18next backend when we deploy code to staging. When app loads then we get translations from localazy and when translation is missing then in missingKeyHandler we notify bugsnag.

But in dev env we also create translation bundle (JS object) from those translation files and flow is that if translation is missing in localazy then parseMissingKeyHandler will search value from this object and return that one instead. If it is missing in translation file then missingKeyHandler will notify us.
So that while developing we can add new keys to translation file and don't have to deploy it to localazy instantly because values are read from object.

[laurib]

Here is the code also if interested:

const missingKeyHandler = (lngs: readonly string[], ns: string, key: string) => {
  if (!isDevelopment) {
    BugsnagClient.notify(
      new Error(`Missing translation ${ns}:${key} for language ${lngs.join(', ')}.`)
    );
  }
};

const parseMissingKeyHandler = (missingKey: string) => {
  // split missingkey namespace:missing.key and look for it from resbundle object
  const namespaceSplit = missingKey.split(':');
  const [namespace, keysString] = namespaceSplit;
  const keys = (keysString ?? '').split('.');
  if (resBundle.en && namespace && keys.length) {
    const translation = reduce(
      keys,
      (current, key) => {
        if (typeof current === 'object') {
          return current[key];
        }
        return current;
      },
      resBundle.en[namespace]
    );
    if (typeof translation === 'string') {
      return translation;
    }
  }
  BugsnagClient.notify(new Error(`Missing translation ${missingKey}.`));
  return missingKey;
};

const translator = i18n
  .use(LanguageDetector)
  .use(intervalPlural)
  .use(initReactI18next)
  .use(HttpApi)
  .init({
    ...(isDevelopment && {
      appendNamespaceToMissingKey: true,
      parseMissingKeyHandler,
    }),
    fallbackNS: 'translation',
    supportedLngs: ['en', 'et', 'fi', 'sv', 'us', 'en-US', 'en-us'],
    fallbackLng: 'en',
    returnEmptyString: false, // Replace missing translations with fallback language
    debug: false,
    saveMissing: true,
    saveMissingTo: 'current',
    missingKeyNoValueFallbackToKey: false, // Don't show keys, if translations not loaded yet
    missingKeyHandler,
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: true,
    },
    backend: {
      crossDomain: true,
      loadPath: getLocalazyLoadPath as any,
    },
  });

[adrai]

Is my assumption correct, this was working until v21.6.10 ?

[laurib]

I really can't tell, but it could be so. All i know that my code was made 4 months ago and then it worked. And if i remember correctly first time i noticed that something is not right was about month ago.. so could be in this time period.

I would not mind if appendNamespaceToMissingKey doesn't add namespace to key and namespace is added as second attr to parseMissingKeyHandler

const parseMissingKeyHandler = (missingKey: string, namespace: string) => {}

[adrai]

v21.8.6 should now work with appendNamespaceToMissingKey, like before... the second argument is already taken by the optional default value

[adrai]

btw: you may not know, but all this could be simplified if using directly the service of the main i18next sponsor => locize
https://youtu.be/osScyaGMVqo

locize is the official sponsor of i18next. With using locize you directly support the future of i18next.

[laurib]

Thank you so much! Working now as expected!