react.i18next.com Is working fine inside my main Project but not in my npm package which i used inside my main Project

Question about react-i18next

Questions should be posted on StackOverflow I have two project

• One is main project
• Second one is my react npm package(repository) which i used inside my main project’s package.json file as below, "dependencies": { "package-name": "git+https://oauth2:<Access-Token>@gitlab.com/<Project-name>/react-menu.git" }

So if i followed all the steps given over here : https://react.i18next.com/latest/using-with-hooks Then it is working fine in main project using both way using Hook and using HOC

But when i am trying to add same code inside my another repository as i mentioned above then it is throwing error like below https://reactjs.org/docs/error-decoder.html/?invariant=321

So i dont know what was wrong.

Can you guys help me with this.

[rawbeans]

When I try:

import i18n from 'i18next';
// then later:
i18n.t("text to translate');

From within my component library, that i18n instance is different from the one in my main app that is importing my component library. The result is empty strings for all translations in my component library.

Where and how did you initialize your i18next instance? How are your two projects set up?

Update: I got it to work by doing the following:

import { useTranslation } from 'react-i18next';
// then later:
const { t } = useTranslation();
t("text to translate');

And in my component library package.json, adding the following to peerDependencies:

"peerDependencies": {
    "react-i18next": "^11.4.0",
},

That way, the main projects i18n instance was used instead of bundling a separate version of all i18next packages and creating a second instance.

[ParthCodeDev]

When I try:

import i18n from 'i18next';
// then later:
i18n.t("text to translate');

From within my component library, that i18n instance is different from the one in my main app that is importing my component library. The result is empty strings for all translations in my component library.

Where and how did you initialize your i18next instance? How are your two projects set up?

Update: I got it to work by doing the following:

import { useTranslation } from 'react-i18next';
// then later:
const { t } = useTranslation();
t("text to translate');

And in my component library package.json, adding the following to peerDependencies:

"peerDependencies": {
    "react-i18next": "^11.4.0",
},

That way, the main projects i18n instance was used instead of bundling a separate version of all i18next packages and creating a second instance.

I have two project one is main project second one is react menu repositry from which i get menu

Inside my main project i handle everything regarding translation and whatever translation text i need inside my second project i am passing it as props so i can access them inside my second project