Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Naman-Garaaz opened this issue Dec 15, 2022 · 33 comments

Comments

@Naman-Garaaz
Copy link

Naman-Garaaz commented Dec 15, 2022

馃悰 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.
image

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
Copy link
Member

adrai commented Dec 15, 2022

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
Copy link

stale bot commented Dec 23, 2022

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.

@stale stale bot added the stale label Dec 23, 2022
@furkansahintr
Copy link

@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
Copy link

mutefiRe commented Jan 3, 2023

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
Copy link

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).

@stale stale bot removed the stale label Jan 6, 2023
@adrai
Copy link
Member

adrai commented Jan 6, 2023

A minimal reproducible example would help to investigate...

@coderanger
Copy link

coderanger commented Jan 7, 2023

@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
Copy link

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

@adrai
Copy link
Member

adrai commented Jan 7, 2023

@coderanger can you try with v12.1.3 ?

@coderanger
Copy link

@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
Copy link

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
Copy link
Member

adrai commented Jan 7, 2023

use v12.1.4 and change your code to:
image

@coderanger
Copy link

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
Copy link
Member

adrai commented Jan 7, 2023

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
Copy link

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
Copy link

stale bot commented Jan 16, 2023

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.

@stale stale bot added the stale label Jan 16, 2023
@sgardnervio
Copy link

https://github.com/sgardnervio/contextless_reacti18n

I鈥檝e 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鈥檛 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鈥檓 not interested in loading a different i18n instance for the component I want the imported component to use the already init鈥檇 instance. In the linked repo you can see that with or without using the <I18nextProvider> this issue still occurs.

@stale stale bot removed the stale label Jan 17, 2023
@adrai
Copy link
Member

adrai commented Jan 17, 2023

https://github.com/sgardnervio/contextless_reacti18n

I鈥檝e 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鈥檛 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鈥檓 not interested in loading a different i18n instance for the component I want the imported component to use the already init鈥檇 instance. In the linked repo you can see that with or without using the <I18nextProvider> this issue still occurs.

@sgardnervio seems to work:
image

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

@sgardnervio
Copy link

sgardnervio commented Jan 17, 2023

@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.

image

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

@adrai
Copy link
Member

adrai commented Jan 17, 2023

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:

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.

@sgardnervio
Copy link

sgardnervio commented Feb 1, 2023

@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
Copy link

stale bot commented Feb 18, 2023

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.

@stale stale bot added the stale label Feb 18, 2023
@Travel24Seven
Copy link

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
Copy link
Member

adrai commented Mar 8, 2023

@Travel24Seven A minimal reproducible example may help.

@Travel24Seven
Copy link

@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 stale bot removed the stale label Mar 8, 2023
@stale
Copy link

stale bot commented Mar 18, 2023

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.

@stale stale bot added the stale label Mar 18, 2023
@gabycperezdias
Copy link

gabycperezdias commented Apr 14, 2023

@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 stale bot removed the stale label Apr 14, 2023
@stale
Copy link

stale bot commented Apr 26, 2023

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.

@stale stale bot added the stale label Apr 26, 2023
@stale stale bot closed this as completed May 8, 2023
@crow7m
Copy link

crow7m commented May 24, 2023

Any update here ?

@gabycperezdias
Copy link

@crow7m Using latest react-i18next version worked for me

@crow7m
Copy link

crow7m commented May 24, 2023

@crow7m Using latest react-i18next version worked for me

Thank you @gabycperezdias

@padabala
Copy link

padabala commented Jun 14, 2023

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests