CODEWITHSUNDEEP
reactjs
user11530349
user11530349

Reputation:

Translate i18next on React can't find key

I am using i18n for the first time and actually got it to load without errors but now I have an issue when trying to change the language to display:

i18next: languageChanged es
i18next::translator: missingKey es translations title.Library Library

The thing is I am not sure why I've googled around and it says it's because of the file not loading properly (JSON with the translations) but the autocomplete works which make me think it's being loaded on my i18n.js file:

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import XHR from "i18next-xhr-backend";

import translations_en from './locales/en/translation.en.json';
import translations_es from './locales/es/translation.es.json';

i18n

.use(XHR)
.use(LanguageDetector)
.init({
  // we init with resources
  resources: {
    en: {
      translations: translations_en
    },
    es: {
      translations: translations_es
    }
  },
  fallbackLng: "en",
  debug: true,

  // have a common namespace used around the full app
  ns: ["translations"],
  defaultNS: "translations",

  keySeparator: false, // we use content as keys

  interpolation: {
    escapeValue: false, // not needed for react!!
    formatSeparator: ","
  },

  react: {
    wait: true,
    useSuspense: false
  }
});

export default i18n;

Still, I can't figure out why that's happening, on my Library.js I am doing:

...
<a class="text-center"><Trans i18nKey="title.Library">Library</Trans></a>
...

And here's the JSON file:

{
    "title": {
        "Library": "Biblioteca"
    }
      
}

I should also add taht my file structure looks as follows:

src
|
|-- assets/
|-- locales/
|    |
|    |-- en/
|    |    |-- translation.en.json
|    |     
|    |-- es/
|    |--  |-- translation.es.json

Upvotes: 3

Views: 2718

Answers (1)

Niraj Chutteeya
Niraj Chutteeya

Reputation: 215

You are using keybased catalog instead of natural keys as per your JSON file. remove this line

keySeparator: false, // we use content as keys

Upvotes: 2

Related Questions