How to use i18next on a custom Typescript library and a host at the same time?

Question

I am making a typescript library that accepts an object and spits out an excel. This library is supposed to be used with several React apps. Each React app[Host] will provide an object and the custom library returns an excel.

All the React apps use i18next for translation. The custom library also needs to use its own set of translations so that also has i18next. I am trying to avoid passing the translation strings from the Host to my library.

Problem: As soon as I call any function in my library, i18next in the library takes over the i18n of Host. This is expected, As we have two i18next.init() functions [One in my library and one in the host]. Whoever gets called last wins [Library in my case]. All the translation strings in the Host are noted to be missing [by the i18nxt of library] since the newly initialized i18next in the library can't see Host translations.

Question:

How can I approach this problem, if I need to keep i18n on both the library and host? I am expecting both to have their own translations.

I believe you won't need any code to understand the problem.

You may use createInstance instead of only init() -> i18next.com/overview/api#createinstance — adrai
– adrai, Commented Nov 6, 2021 at 9:35
I haven't tried your idea yet, but I am afraid it will cause the same issue of overriding host translations as soon as it gets a new instance. — Sanish Joseph
– Sanish Joseph, Commented Nov 7, 2021 at 19:42
i18next.createInstance(options, callback) Will return a new i18next instance. This is not what I wanted. I needed a way to append my new resources to an existing instance. I managed to do that if you see the update. — Sanish Joseph
– Sanish Joseph, Commented Nov 8, 2021 at 16:47
@SanishJoseph, could you explain in a little more detail? I have a similar situation where we have a React front end supported by two major support libraries. I just can't seem to figure out how to hook these things up! With no init, how does your library actually translate anything? What do you mean "used i18next.addResourceBundle"? I'm just getting a migraine trying to piece together all the moving parts. I can make things work in React, but nothing I try seems to work in the libraries. — Aaron
– Aaron, Commented Nov 9, 2021 at 2:44

Sanish Joseph · Accepted Answer · 2021-11-09 17:37:21Z

2

As I have updated my question, I have managed to get this working. In my case, I have multiple react host apps which use my library. Some hosts don't have i18next installed and some already have it as a dependency. I needed a way to detect whether i8next is initialized or not. If it is not initialized initialize it with the excel generation library resources. Below is the code where I am detecting and adding/updating the resources based on the status of i18next. For my library resources, I am using a namespace so there won't be a name collition. You can access your library resources like t("tkdirectequibuild:heading"). I had to specify the namespace along with key always, which is not that bad. I kept lang as optional as i18next can detect the language in case of an already instantiated host.

import i18next from "i18next";
import enResources from "./translations/en/translation.json";
import frResources from "./translations/fr/translation.json";

export function addExcelResource(lang?: string) {
  if (i18next.isInitialized) {
    console.info("i18Next Exists");
    if (!i18next.hasResourceBundle("en", "tkdirectequibuild")) {
      console.info("en-Added");
      i18next.addResourceBundle("en", "tkdirectequibuild", enResources);
    }
    if (!i18next.hasResourceBundle("fr", "tkdirectequibuild")) {
      console.info("fr-Added");
      i18next.addResourceBundle("fr", "tkdirectequibuild", frResources);
    }
    if (lang) {
      i18next.changeLanguage(lang);
    }
  } else {
    console.info("i18Next is missing in the HOST. Adding our own");
    i18next.init({
      lng: lang,
      ns: ["tkdirectequibuild"],
      initImmediate: false,
      resources: {
        en: {
          tkdirectequibuild: enResources,
        },
        fr: {
          tkdirectequibuild: frResources,
        },
      },
    });
  }

  return i18next;
}

In the calling library function, I added these lines,

const i18n = addExcelResource(lang); const { t } = i18n;

edited Nov 9, 2021 at 17:37

answered Nov 9, 2021 at 17:22

Sanish Joseph

2,2763 gold badges18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aaron Over a year ago

THANK YOU, THANK YOU, THANK YOU! This did exactly what I needed. I really appreciate you taking the time to elaborate!

Sanish Joseph Over a year ago

It was my problem too. Happy that my solution helped someone :D

Cyril · Accepted Answer · 2025-02-03 18:58:45Z

I used a different instance of i18n as mentioned in the documentation. https://react.i18next.com/latest/i18nextprovider#what-it-do.

Library is wrapped with I18nextProvider:

import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import App from './App';

<I18nextProvider i18n={i18n} defaultNS={'translation'}>
  <App />
</I18nextProvider>

and I created a new instance for i18n:

import { createInstance } from 'i18next';

const i18n = createInstance({
  fallbackLng: 'en',
  debug: true,

  interpolation: {
    escapeValue: false, // not needed for react as it escapes by default
  },

  resources: {
    en: {
      translation: {
        hello: 'Hello from other i18n instance',
      },
    },
    de: {
      translation: {
        hello: 'Hallo aus einer anderen i18n Instanz',
      },
    },
  },
});

i18n.init();

export default i18n;

The host rest unchanged.

Collectives™ on Stack Overflow

How to use i18next on a custom Typescript library and a host at the same time?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related