Is there a way to get t function outside functional component, or without hook ?

[kristijorgji]

Hi,
I was looking for a way to get t function outside functional component context or without using hook
(as was described here #983) but at the moment could not find such.

I have a utils file utils.ts, and export there a dialog function, and need to add t func there to translate from common namespace

export const salert = new Alert(Swal, // need T function here);

How can I get t fn there

I tried this

import { i18n } from 'next-i18next';
i18n?.t as TFunction

but did not work

[isaachinman]

but did not work

Can you explain more?

[kristijorgji]

Yes I can explain

1. I tested useTranslation hook, not inside a functional component but just in a normal ts file and got error "cannot use hook outside functional component context"
2. I tested

import { i18n } from 'next-i18next';
i18n?.t as TFunction 

and i18n.t was undefined

3. How can I fetch the t function from a normal ts/js file that is not using a react component ?

I have a normal ts file that needs to translate some strings.
This is imported by a next application, that is using of course appWithTranslations

[isaachinman]

Check the value of i18n. It will be null until the global i18n instance initialises. You can only call i18n.t after your app has initialised.

[kristijorgji]

Why is the app not initializing then to create i18n, app is the first thing running, then importing this utility file....

Will check once more, but flow is like this, a page is importing the util file, and the page is imported by _app.tsx so i18n should exist at that time

[kristijorgji]

Check the value of i18n. It will be null until the global i18n instance initialises. You can only call i18n.t after your app has initialised.

I checked sometimes i18n is not null other times null.

Is there a way to listen for i18n status ? maybe by registering a callback event or something like that

I traced how my util file is called, which tries to access t function and looks ok

./src/c/single/index.ts | @ | _app.js?ts=1633892107712:797
-- | -- | --
  | options.factory | @ | webpack.js?ts=1633892107712:685
  | __webpack_require__ | @ | webpack.js?ts=1633892107712:37
  | fn | @ | webpack.js?ts=1633892107712:354
  | eval | @ | Header.tsx:12
  | ./src/c/components/organisms/Header/Header.tsx

So first below is _app.ts called, then Header component then this one is including single/index.ts which exports one alert function, like this export const alert = new AlertManager(i18n.t);

At this moment i18n is null, then after some seconds is not null anymore

[isaachinman]

#918 (comment)

[bryanprimus]

still can't get this work done

[Spell28]

@bryantobing12
I didn't understand how to do it the first time either, it ended up like this:

import { i18n } from 'next-i18next'; // Import
i18n?.init() // Initialize i18n
i18n?.t('translate_key') // get something from your translation json file using current Language

[mickdewald]

@bryantobing12 I didn't understand how to do it the first time either, it ended up like this:

import { i18n } from 'next-i18next'; // Import
i18n?.init() // Initialize i18n
i18n?.t('translate_key') // get something from your translation json file using current Language

This does not work.
i18n is always null

[AljazGornik]

@micktg did you manage to resolve this? we are facing the same issue

[mickdewald]

@micktg did you manage to resolve this? we are facing the same issue

I used https://github.com/JCQuintas/ni18n for this.

[asilliahmet]

for future reference, here is how i fixed it with async.
just await and use it: const t = await t_hook

`import i18next from "i18next";

const t_hook = (async ()=>{
if (i18next.isInitialized) {
return i18next.t;
}
await i18next.init();
return i18next.t;
})();

export default t_hook;`

[zjy365]

I think we should reopen this issue. It seems that there is no good way to solve this problem.

[illicit-oblivion]

@micktg did you manage to resolve this? we are facing the same issue

I used https://github.com/JCQuintas/ni18n for this.

can you show how to use this particular library outside the component?