Issue with new versions after 12.1.0 and components library and i18next initialization

[gabycperezdias]

🐛 Bug Report

I have an internally developed library containing common components. They all make use of t('') / useTranslation. Since this is a repo for loose components, I cannot initialize i18next, and instead use the initialization from my main application (that imports and uses the components from the library).

This used to work perfectly fine up until version 12.0.0, version 12.1.0 somehow broke it and I cannot figure it out how to fix this. With this new version I get this error: react-i18next:: You will need to pass in an i18next instance by using initReactI18next and the translations don't work anymore for any of the components inside my component library.

I have this on my main application:

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import BackendAdapter from 'i18next-multiload-backend-adapter';
import HttpApi from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';

i18n
  .use(BackendAdapter)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    detection: {
      order: ['querystring', 'navigator', 'htmlTag'],
      lookupQuerystring: 'lang',
      lookupLocalStorage: 'lang',
      lookupCookie: 'lang',
    },
    keySeparator: false,
    fallbackLng: Fallback.i18nextFallback,
    appendNamespaceToMissingKey: true,
    parseMissingKeyHandler: (key) => `Resx:${key}`,
    defaultNS: 'Common',
    ns: ['Common'],
    interpolation: {
      escapeValue: false
    },
    backend: {
      backend: HttpApi,
      backendOption: {
        loadPath: `${process.env.PATH}`
      }
    }
  });

export default i18n;

All I can find in the docs is that I should create 2 instances, but since this is a loose-components library I cannot do this. It is also very impractical for me to refactor all my components to receive t as a prop, mainly considering that this was working before a minor version was released.

I cannot find the exact changelog, but from the code diff it should not cause such a problem, any ideas? I am not sure if it is a bug or something I need to do on my code, although, since this used to work perfectly before 12.1.0 I would really appreciate if the answer for this is not just "Deal with it" or "Refactor your whole library + usage to be receiving/passing t functions everywhere

[adrai]

I assume you have multiple react-i18next modules installed or use multiple react-i18next module instances... Please provide a minimal reproducible example and we'll try to find the issue.

[gabycperezdias]

That's the weird thing though... I only initialize react-i18next in my main application... I have the react-18next library as a dep for both my main app and my components library. But since I don't have a "index" file with content (my index simply exports all my components) I cannot initialize it inside that package... so I am not sure how I would have multiple instances...

Basically what I have:

MyPackage:

MyCustomTextBoxImplementation (makes use of useTranslation)

And I export that from index

Then, my main project (that has an init) uses that component... but I will work on an example...

[adrai]

Yes, provide a reproducible example repository.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gabycperezdias]

I am struggling to get a sandbox done... weirdly, this is only happening in a branch where I updated my webpack to 5... my branch with webpack 4 works without issues

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.