i18next was not initialized undefined

[saidhasyim]

🐛 Bug Report

Hi, sorry. I'm not sure whether this is a bug or not. I followed the video instruction, copied the tutorial sample and i have not been able to do the translation on a global const outside of component. i can do the useTranslation perfectly in react component file.

I studied the step that we can call i18n.t directly after init. and so i did, but i hit this error "i18next: hasLoadedNamespace: i18next was not initialized undefined"

i18next::translator: key "notFoundDescription" for languages "en" won't get resolved as namespace "translation" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!
i18next: hasLoadedNamespace: i18next was not initialized undefined

I've been searching stackoverflow for days but can't resolve it myself. I have also tried this i18next/react-i18next#909 (comment)

Perhaps there is something wrong with my setup. Would you be so kind to help me out?

To Reproduce

I have prepared the reproducible example here: https://github.com/saidhasyim/i18n-outside

Specifically, this is the part of code that i'm trying to translate 'notFoundDescription'. the i18n has been init in a separate file.

import i18n from '/i18n';

console.log("==============");
console.log(i18n.t('notFoundDescription'));
console.log("==============");

const form = {
    formId: "testform",
    formField: {
      title: {
        name: "title inside test to Delete"
      }
    }
  }
export default form;

Your Environment

i18next version 22.5.0
Windows

[adrai]

But like the warning already is stating, i18next is probably not initialized when you need that there...
The init is asynchronous, this means you need to call the t function later (not in the root of the file)
Use only the i18n key in your form object and on runtime in your react component call the t function with that i18n key accordingly.

[saidhasyim]

I confirm that it is indeed caused by it not loaded, i do a "sleep" and it finally translates properly.
I can try the method you mentioned, to call the t function later at the react component. The thing is, some of my codes requires the translation to happen before reaching the React Component (or maybe I just dont know how to work around it).

for example: I'm exporting my YUP validation from a file, which means i need to do the translation upfront inside this file

const validations = [
  Yup.object().shape({
    [title.name]: Yup.string().required(title.errorMsg),
  })
];

So, I'm keen to look into ways to do it outside of components. I've looked into https://www.i18next.com/overview/api#loadnamespaces and also a few suggestions in GitHub. I ended up with something like this

let waitingForResult =null;
i18n.loadNamespaces('common', (err) => 
{ 
  waitingForResult = i18n.t('notFoundDescription')
  console.log("waitingForResult");
  console.log(waitingForResult);
  return waitingForResult;
});

console.log("waitingForResult");
console.log(waitingForResult);

const form = {
  formId: "testId", 
  formField: {
    title: {
      name: "title", //==> i want to translate this
      label: "Title",
    },
  }}

export default form;

Doing the translation inside the promise. Just that I need to export "form" out with the translated value. I'm not sure how to do so. Or, is it advisable to just rework the code such that every translation is done at component level? If so, i will redo my code to achive that