2

I have a problem with the setup of my i18next. There's a warning that says react-i18next:: You will need to pass in an i18next instance by using initReactI18next and if I refresh the page everything turns out as variables' names.

this is my i18n.ts file:

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

const backend = new Backend({
  // path where resources get loaded from
  loadPath: '../locales/{{lng}}/{{ns}}.json',
});

i18n
  // load translation using http -> see /public/locales
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: 'EN',
    debug: false,

    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
    },
  });

export default i18n;

I got this from the official doc.

I use it in the following way around my project:

import { useTranslation } from 'react-i18next';

const MyComponent () => {
  //...
  const { t } = useTranslation();
  //...

  return (<>{t("COMMONS.SAY_HI")}</>)

}

I have a basic nextjs project with typescript. This error occures only inone specific page but things seem to be used as the same everywhere and I can't figure out what's the problem.

Also, when I build the project, then everywhere I see only the name variables instead of their content. Is there a problem with the execution stack or something?

Loudrous
  • 1,039
  • 10
  • 29
  • Check this [link](https://stackoverflow.com/questions/67894982/react-i18next-you-will-need-to-pass-in-an-i18next-instance-by-using-initreacti) This thread will probably help you – Moïse Gui Nov 15 '21 at 22:24
  • GG man! The problem is that I didn't include the file `i18n.ts` in the "father". Thx – Loudrous Nov 16 '21 at 21:14
  • how can I add a resource language with minus like: `zh-cn`? – huykon225 Apr 25 '22 at 02:58
  • @huykon225 try to add it into init method something like: `.init({fallbackLng:['zh-cn', 'en', 'fr', 'it']})` and then name the folders containing that names from the array an load them with `const backend = new Backend({ loadPath: '../locales/{{lng}}/{{ns}}.json', });` – Loudrous Apr 25 '22 at 09:30
  • for example the folder for `en` translations in this case should be into the folder `/locales/en` and its name is `translation.json` – Loudrous Apr 25 '22 at 09:31
  • @Loudrous I have to use Backend from https://www.i18next.com/overview/plugins-and-utils#backends ? can I use addSourceBundle from https://www.i18next.com/overview/api#addresourcebundle to load file translate? – huykon225 Apr 26 '22 at 02:54

0 Answers0