CODEWITHSUNDEEP
reactjsinternationalizationi18next
ognjenj
ognjenj

Reputation: 128

Im having issues with i18next in react 18

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?

Upvotes: 5

Views: 10733

Answers (3)

d0m00re
d0m00re

Reputation: 133

Another solution for solve this, you could add

t("Username") ?? "";

Or create a function with this comportment and call it in place of t

const tOverwrite = (key : string) : string => i18next.t(key) ?? "";

Upvotes: 1

Seth
Seth

Reputation: 156

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
});

Upvotes: 10

ognjenj
ognjenj

Reputation: 128

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

Upvotes: 4

Related Questions