React Typescript i18next missing key error

Question

I want to add translator for my project but i18next show key and have missing key error in console.

my translations path: src/locales/{Language}/translation.json
i18n.ts code in src directory:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import i18next from "i18next";

i18n.use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    debug: true,
    interpolation: {
      escapeValue: false,
    },
    backend: {
      loadPath: "./locales/{{lng}}/translation.json",
    },
  });

export default i18n;

react-i18next.d.ts code :

import "react-i18next";
import en from "./src/locales/en/translation.json";
import fa from "./src/locales/fa/translation.json";

declare module "react-i18next" {
  interface Resources {
    en: typeof en;
    fa: typeof fa;
  }
}

and translation.json is like this:

{
    "Hello": "Hello World"
}

use in component:

import { useTranslation } from "react-i18next";

function hello (){

  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1> {t("Hello")}</h1>
    </div>

  );
}

milad emami · Accepted Answer · 2022-04-19 23:59:28Z

first change i18.ts file to i18nProvider and add your code into useEffect like this

const I18nProvider: React.FunctionComponent = (props) => {
    useEffect(() => {
       i18n.use(Backend)
      .use(LanguageDetector)
      .use(initReactI18next)
      .init({
        fallbackLng: "en",
        debug: true,
        interpolation: {
          escapeValue: false,
        },
        backend: {
          loadPath: "./locales/{{lng}}/translation.json",
        },
      });
 }, []);
  return (
     <Suspense fallback={<h1>Loading ...</h1>}>
    <I18nextProvider i18n={i18n}>{props.children}</I18nextProvider>
     </Suspense>
  );

second add i18Provider to your _app like this:

const MyApp = ({ Component, pageProps }) => {
  return (
      <I18nProvider>
            <Component {...pageProps} />
      </I18nProvider>
  );
};

export default MyApp;

EhsaN · Accepted Answer · 2022-04-20 17:15:38Z

0

The problem is solved, if you have the same problem, just follow the example below. The problem will be solved. Note that even the names of the folders and their location should be the same as the example.

Link: https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb

answered Apr 20, 2022 at 17:15

EhsaN

1491 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

React Typescript i18next missing key error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related