react-i18next:: You will need to pass in an i18next instance by using initReactI18next

[Naman-Garaaz]

🐛 Bug Report

getting this issue in my react native project.
Using the same versions in another react native project both has same react native version. But issue persist in one not another.

MY code
i18next file-----
import i18next from 'i18next';
import english from './english.json';

import { initReactI18next } from 'react-i18next';

i18next.use(initReactI18next).init({
compatibilityJSON: 'v3',
lng: 'en',
resources: {
en: english,
},
react: {
useSuspense: false,
},
});

export default i18next;

--using manner----
const { t, i18n } = useTranslation();
----{t('ReviewingYou')}

Your Environment

• runtime version: i.e. node v14, deno, browser xy
• i18next version: "i18next": "^22.0.6",
  "react-i18next": "^12.0.0",
  "react-native-translation": "^1.1.0",
  "react": "18.1.0",
  react native version 0.70.6
• os: Windows
• any other relevant information

[adrai]

This is not a reproducible example (best would be a minimal expo example that works also in browser)... these are just code snippets...
Sorry, not able to help like that...

[stale]

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.

[furkansahintr]

@Namangaraaz I just got the same error. This issue arose when I started using the Slice API in my app. Disable slice Api and try. (my app is based Gatsbyjs)

[mutefiRe]

This definitely comes up since #1588

We have quite a complicated setup with 2 instances, one of them used within components injected into an iframe. I can try to reproduce it in a sandbox.

[coderanger]

Also having issues with Gatsby and gatsby-plugin-react-i18next. It works with 12.0.0 but 12.1.0 and up crash because it's not finding the i18n object from the context (I18nextProvider is used in the Gatsby plugin automatically).

[adrai]

A minimal reproducible example would help to investigate...

[coderanger]

@adrai https://github.com/coderanger/react-i18next-crash-repro here you go :-) It's a stock npm init gatsby site with gatsby-plugin-react-i18next installed with the example config and a single <Trans> tag added the index page.

[coderanger]

If you downgrade react-i18next to 12.0.0 it will work.

[adrai]

@coderanger can you try with v12.1.3 ?

[coderanger]

@adrai

Error in function Trans in ./node_modules/react-i18next/dist/es/Trans.js:46

t is undefined

Digging a little more to confirm that the fix doesn't just result in silencing the error while still failing to load translations, will update shortly.

[coderanger]

Confirmed, I changed that bit of code to be t && t.ns and now it doesn't crash but the root problem of the i18n object not being found still remains so the default strings are shown in all places. I updated the repro example a bit to show this.

[adrai]

use v12.1.4 and change your code to:

[coderanger]

Okay that works, though I'm a bit confused why it does :D The gatsby plugin is just re-exporting all the symbols from react-i18next under the hood. Is this something weird with npm's nested dependencies and React not considering the two copies of react-i18next to be the same?

[adrai]

Okay that works, though I'm a bit confused why it does :D The gatsby plugin is just re-exporting all the symbols from react-i18next under the hood. Is this something weird with npm's nested dependencies and React not considering the two copies of react-i18next to be the same?

maybe @jimmyn can help with this question?

[coderanger]

The gatsby plugin does (correctly) list react-i18next as a peer dep so there aren't actually even two copies of it, and yet your fix definitely works. JavaScript confusion abounds :D

[stale]

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.

[schoterson]

https://github.com/sgardnervio/contextless_reacti18n

I’ve encountered this warning as well and it shows in the UI as the key being displayed and not the value.

The use case is loading a component from a separate package into a UI app that has an i18n.ts defined. The imported component from the external package is using the hook useTranslation() and it can’t access the loaded i18n instance already in-use. The removal of the React.useContext() seems to be the cause as moving back to 12.0.0 this issue goes away.

I want to be clear in stating I’m not interested in loading a different i18n instance for the component I want the imported component to use the already init’d instance. In the linked repo you can see that with or without using the <I18nextProvider> this issue still occurs.

[adrai]

https://github.com/sgardnervio/contextless_reacti18n

I’ve encountered this warning as well and it shows in the UI as the key being displayed and not the value.

The use case is loading a component from a separate package into a UI app that has an i18n.ts defined. The imported component from the external package is using the hook useTranslation() and it can’t access the loaded i18n instance already in-use. The removal of the React.useContext() seems to be the cause as moving back to 12.0.0 this issue goes away.

I want to be clear in stating I’m not interested in loading a different i18n instance for the component I want the imported component to use the already init’d instance. In the linked repo you can see that with or without using the <I18nextProvider> this issue still occurs.

@sgardnervio seems to work:

tried also with v12.1.4
also here it seems to work: https://github.com/i18next/react-i18next/tree/master/example/react-component-lib

[schoterson]

@adrai thanks for taking a look so quickly. I see that the react-component-lib works.. but it is also using a different i18n.js which is what I'm trying to avoid.

as for it working for your and not me I guess I'd have to ask if you re-ran the yarn install step. I had missed that in my reproduction steps. so the steps are update the the package.json, run yarn install, run components:build then lastly run yarn start

with 12.1.4 in use locally I still encounter the same issue where the <MyComponent/> doesn't get the i18n instance as seen in the UI as well as the console.

May I inquire as to why the move away from React.useContext() in the v12.1.1 was done?

[adrai]

May I inquire as to why the move away from React.useContext() in the v12.1.1 was done?

React.useContext() has not been removed! We just introduced a Trans component version that does not use the react context for server side environments, like Next.js 13 app dir.
The Trans component still uses the react context:

react-i18next/src/Trans.js

Line 23 in 11bfe43

const { i18n: i18nFromContext, defaultNS: defaultNSFromContext } = useContext(I18nContext) || {};

but there is also a Trans component without that usage: https://github.com/i18next/react-i18next/blob/master/src/TransWithoutContext.js

Honestly I don't know why it worked with v12.0.0... imo it should not have worked either...
I would never assume in a component lib the i18next instance is correct... You never know... the bundler or the build process or whatever is referencing a different react-i18next installation... but that's just my opinion.

Seems like yarn is using 2 different react-i18next instances (one in app and one in components). I'm not a yarn user, so if you know of anything we could do to help, let me know. I have no idea, sorry.

[schoterson]

@adrai I just wanted to loop back around and let you know I've found a solution.. while I would prefer to not have to implement this solution for each component it seems to satisfy my needs of using the i18n instance defined in the application the component library is being imported into. This way the components can use whichever i18n instance is in use for any app that is using them including the Storybook app which allows devs to see the components and their documentation.

essentially I'm using the HoC concept and passing in to the component the const {i18n, t, tReady} = {...props} method and instance that the parent app is using.

you can if your curious see this in my latest code in the reproducible example. Using the provider with v12.1.4 still doesn't work but I wasn't a big fan of that approach anyways.

I'm still curious on why imported components could access the i18n instance of the app in v12.0.0 but stopped after v12.1.0. I still believe it is something to do with the changes related to this contextLess code but I haven't been able to track it down to line number yet.

[stale]

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.

[Travel24Seven]

Hello guys, I'm also facing this error in production only. Any lead on what might the root cause of this ? I am using backend plugin to get the my translations. Everything is so smooth on FE but once i build my react app and use the bundle in the BE I'm seeing this error. The error goes away if i reload the page few time but comes back.

[adrai]

@Travel24Seven A minimal reproducible example may help.

[Travel24Seven]

@adrai we are using this library in our private company codebase. I am not sure how to get the code on the public domain. facing the issue with bundling the react-i18next as the code work fines in the front end individual server but gets this error when bundled. BTW thanks for such a early reply.

[stale]

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]

@sgardnervio / @adrai Any idea how to fix this without having to wrap all components with an HOC? The weirdest is that it worked before this refactor...

I am using webpack5, and weirder is that the latest version of i18next work for webpack4 but not on webpack5.... I am not sure how to create a reproducible sandbox because I would need a published npm package (mine is proprietary) + webpack5 config + main app, I am not sure how to put this all into a sandbox-like...

But, if I could get at least keywords/ideas on where to look? I don't have any fancy processing on my node_modules with webpack5... ( I mostly use an emitted version of CRA's project)

And basically:
v12.0.0 works with both webpack4 and 5
anything > v12.0.0 works only on webpack4

I also saw reports on this GH of this issue react-i18next:: You will need to pass in an i18next instance by using initReactI18next showing up when the actual issue has NOTHING to do with react-i18next, so it is really complicated to understand where the issue lies... :(

[stale]

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.

[crow7m]

Any update here ?

[gabycperezdias]

@crow7m Using latest react-i18next version worked for me

[crow7m]

@crow7m Using latest react-i18next version worked for me

Thank you @gabycperezdias

[padabala]

In order to initialise it, import init file to index.js file on root level.
For example: If your init code is in /src/translations/i18n.ts then import it into root level index.js file as

`
import { AppRegistry } from 'react-native'
import App from './App'
import { name as appName } from './app.json'
import './src/translations/i18n'

AppRegistry.registerComponent(appName, () => App)
`
This will make sure it gets initialised before start using it by useTranslation() hook.

Now the error disappears and working well with translations.
In the components where needed.

import { useTranslation } from 'react-i18next'

const { t } = useTranslation()

t('key')

[vaibhavgadekar]

In order to initialise it, import init file to index.js file on root level. For example: If your init code is in /src/translations/i18n.ts then import it into root level index.js file as

` import { AppRegistry } from 'react-native' import App from './App' import { name as appName } from './app.json' import './src/translations/i18n'

AppRegistry.registerComponent(appName, () => App) ` This will make sure it gets initialised before start using it by useTranslation() hook.

Now the error disappears and working well with translations. In the components where needed.

import { useTranslation } from 'react-i18next'

const { t } = useTranslation()

t('key')

Thanks @padabala, I forgot to initialise in index.js