Im having issues with i18next in react 18

Question

I cant use t from i18n inside a label (nor inside any html tag for that matter) and i cant figure out why, if i use it outside of tags in jsx it works fine and grabs translation from my json files.

Code example: <label htmlFor={"username"}>{t("Username")}</label>

im getting the error message: Type 'DefaultTFuncReturn' is not assignable to type 'ReactI18NextChild | Iterable'. Type 'object' is not assignable to type 'ReactI18NextChild | Iterable'.

Has anyone had similar issue and do you know how to solve it?

Answer 1

I "solved" the issue by wrapping label contents in a fragment tag like this:
<label htmlFor={"username"}><>{t("Username")}</></label>
this works as its supposed to and doesnt throw errors but im not sure how viable this solution is and still havent figured out why exactly does it happen

Answer 2

I answered this here also but sharing here as well.

I had the same problem and found a fix in the official docs here . i18next's t method can return a null value but was only recently reflected in the types. The null return needs to be prevented. Find your i18n configuration, probably called i18n.ts .

// i18n.ts
import 'i18next';

// declare custom type options so the return is always a string.

declare module 'i18next' {
  interface CustomTypeOptions {
    returnNull: false
  }
}

// update the initialization so the behavior matches the type:
i18next.init({
  returnNull: false,
  // ... any other initializations here
});