How to use i18n library with React Vite?

Question

In my developer console I get the following:

i18next::translator: missingKey en translation suche suche

my file project file structure looks like this:

vite.config.ts
i18n.js
test/
src/
  components/InputSearch.tsx
  routes/
public/
  de/translation.json
  en/translation.json

de/translation.json

{
  "suche": "Suche"
}

en/translation.json

{
  "suche": "Search"
}

i18n.js

import i18n from "i18next";
import Backend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";
i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    debug: true,
    backend: {
      loadPath: "/locales/{{lng}}/{{ns}}.json",
    },
    interpolation: {
      escapeValue: false,
    },
    fallbackLng: "en",
  });

export default i18n;

I call the translation like so

InputSearch.tsx

import { useTranslation } from "react-i18next";
export const InputSearch = () => {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng: any) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="flex flex-row gap-4 p-4 justify-center">
      <input
        type="text"
        className="input input-bordered w-1/5"
      />
      <button onClick={() => changeLanguage("de")} className="btn bg-secondary">
        {t("suche")}
      </button>
      <button onClick={() => changeLanguage("en")} className="btn bg-secondary">
        {t("suche")}
      </button>
      <input
        disabled
        type="text"
        className="input input-bordered w-full"
      />
    </div>
  );
};

Any ideas about where I might be going wrong would be greatly appreciated. Thanks!

score 0 · Answer 1 · answered Jun 11 '23 at 19:11

You are pointing your i18n instances to translations in a locales folder:

loadPath: "/locales/{{lng}}/{{ns}}.json",

But they seem to be in a public folder:

public/
  de/translation.json
  en/translation.json

Try changing your loadPath to point to the path matching the JSON translations.

How to use i18n library with React Vite?

1 Answers1