Question 73020 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Setup react-i18next with NX Monorepo – Reactjs

I trying to set up i18next inside a monorepo using NX and Module Federation and I’m getting 404, I’m using i18next-http-backend to load the translations async.

I’ve tried to put public/locales/en/translation.json inside the host app, inside the root of the project, and so on. None of them worked for me.

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

i18n
  // loads translations from your server
  // https://github.com/i18next/i18next-http-backend
  .use(HttpApi)
  // 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<HttpBackendOptions>({
    // resources,
    fallbackLng: 'pt-BR',
    debug: true,
    load: 'currentOnly',
    supportedLngs: ['en', 'pt-BR'],
    detection: {
      lookupCookie: 'i18nextLng',
      lookupLocalStorage: 'i18nextLng',
      order: ['localStorage', 'cookie'],
      caches: ['localStorage', 'cookie'],
    },
    interpolation: {
      escapeValue: false,
    },
    backend: {
      loadPath: '../../../../public/locales/{{lng}}/{{ns}}.json',
    },
  });

export default i18n;

enter image description here

enter image description here

Tags:

2

Answers


  1. 0

    In my experience, i18next uses the path of wherever your main file that is served lives. So in this case, i18next makes a request to localhost:4200/public/…, where localhost:4200 is the root of the specific project you served with nx. So you would have to move your public folder into the same level as the main file of the served application.

    Login or Signup to reply.
  2. 0 
    import resourcesToBackend from 'i18next-resources-to-backend';
i18n 
.use(resourcesToBackend((language: string, namespace: string) => import(`../locales/${language}/${namespace}.json`)));

    Replace with your path

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search