CODEWITHSUNDEEP
reactjsinternationalizationi18next
Andrio
Andrio

Reputation: 2088

What am I doing wrong with setting up i18next in React? Getting a "i18next::translator: missingKey" error

In my src folder, I made a folder called i18n, and it contains these three files

en.json
es.json
pl.json

This is what they look like:

{
  "selectAction": "Select Action",
  "workflow": "Workflow",
  "details": "Details"
}

In src folder, I also added this file called i18n.js

import i18n from 'i18next'
import LanguageDetector from "i18next-browser-languagedetector"
import { initReactI18next } from 'react-i18next'
// import Backend from "i18next-xhr-backend";
// import XHR from 'i18next-xhr-backend'
import languageEn from './i18n/en.json'
import languageEs from './i18n/es.json'
import languagePl from './i18n/pl.json'

i18n
  // .use(Backend)
  // .use(XHR)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: languageEn,
      es: languageEs,
      pl: languagePl
    },
    lng: "es",
    fallbackLng: "en",
    debug: true,
    keySeparator: ".",
    interpolation: {
      escapeValue: false,
    }
  });

console.log(i18n.languages)

export default i18n;

My index.js file in the src root looks like this:

// import statements are omitted, but I am importing I18NextProvider and i18n
ReactDOM.render(
  <I18nextProvider i18n={i18n}>
    <App />
  </I18nextProvider>
  document.getElementById('root')
);

Lastly, somewhere in my App I have this:

// Other imports omitted
import { useTranslation } from 'react-i18next';

const DetailsPlaceholder = () => {
  const { t } = useTranslation();

  return (
     <h4 className="zero-state-section-text">{t('selectAction')}</h4>
  );
};

export default DetailsPlaceholder;

When I try to load the page, I see the key 'selectAction' as the text (instead of the real text), and this error gets logged:

i18next::translator: missingKey es translation selectAction selectAction

Upvotes: 1

Views: 524

Answers (1)

terales
terales

Reputation: 3200

All resource files should store strings under translation key (like in quick start for react-i18next):

{
  "translation": {
    "selectAction": "Select Action",
    "workflow": "Workflow",
    "details": "Details"
  }
}

Here is a repository with a reproduced error and fixed configuration:
https://github.com/terales/reproduce-react-i18next-missingkey-error

Upvotes: 1

Related Questions