i18next missing key but other key was found

user_18281071 0
Viewed 776

I dont understand nothing anymore.

I use i18next and want to access to my key but it does not work.

i18next::translator: missingKey de translation profile profile
i18next::translator: missingKey de translation profile profile
i18next::translator: missingKey de translation profile profile

this is my translation.json

{
  "app_name": "Test (NEW DE)",
  "profile": "ss"
}

this works:

<Text>{ t('app_name') }</Text>

this not working:

<Text>{ t('profile') }</Text>

can anyone explain me why its not working correctly ?

i18next

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';

i18next
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    react: {
      useSuspense: false
    },
    fallbackLng: 'en',
    compatibilityJSON: 'v3',
    lng: 'de',
    debug: process.env.NODE_ENV === 'development',
    backend: {
      loadPath: `http://192.168.0.249:4000/public/locales/{{lng}}/translation.json`,
    },
    interpolation: {
      escapeValue: false,
    },
    keySeparator: '.',
  });

export default i18next;
i18next react-native reactjs
1 Answers

I suspect, you're calling the t function too early and are not waiting for the translations to be fully loaded.

If you're not using suspense: useSuspense: false you need to make sure you check for the ready flag instead.

https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

// additional ready will state if translations are loaded or not
const { t, i18n, ready } = useTranslation('ns1');

https://react.i18next.com/latest/withtranslation-hoc#not-using-suspense

// use tReady prop in MyComponent to check if translations
// are already loaded or not
const ExtendedComponent = withTranslation()(MyComponent);
<ExtendedComponent />
user_18590270
Related