Learning to utilize the i18n library with React Vite

Question

The developer console is showing the following message:

i18next::translator: missingKey en translation suche suche

Here is the file structure of my project:

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

Content of de/translation.json:

{
  "suche": "Suche"
}

Content of en/translation.json:

{
  "suche": "Search"
}

Snippet from i18n.js:

import i18n from "i18next";
import Backend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";
...

The translation is being called in InputSearch.tsx:

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

If you have any insights on where the issue might be, please let me know. Thank you!

Answer 1

Answer №1

Your i18n instances are currently set to look for translations in a directory named locales:

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

However, it appears that the translations are actually located in a folder called public:

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

You may want to update your loadPath to target the correct location of the JSON translations.

Answer 2

Your i18n instances are currently set to look for translations in a directory named locales:

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

However, it appears that the translations are actually located in a folder called public:

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

You may want to update your loadPath to target the correct location of the JSON translations.