Upgrade to v22.0.5 causes type errors because of t returning null #1866

medihack · 2022-11-13T22:19:44Z

medihack
Nov 13, 2022

There are several locations in my React code where I use the t function to provide a translation to a label prop of a 3rd party component library. Unfortunately, those label props only accept string or undefined type. Everything was ok with i18next v22.0.4, but v22.0.5 broke the typing as the TFunction now returns null instead of undefined (error message below). I think I understand the rationale behind this change (fix type errors when used in react components), but what is the best way to handle t function in this scenario? Just do something like t("foobar") ?? undefined or t("foobar")!?

Type 'DefaultTFuncReturn' is not assignable to type 'string | undefined'.
        Type 'null' is not assignable to type 'string | undefined'.

Answered by pedrodurek

Nov 14, 2022

t function can return null, this behaviour is set by default, if you want to change it, set returnNull type to false.

// i18next.d.ts
import 'i18next';

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

I also recommend updating your i18next configuration to behave accordantly. https://www.i18next.com/overview/configuration-options#translation-defaults

i18next.init({
  returnNull: false,
   ...
});

View full answer

pedrodurek · 2022-11-14T20:07:18Z

pedrodurek
Nov 14, 2022
Collaborator

t function can return null, this behaviour is set by default, if you want to change it, set returnNull type to false.

// i18next.d.ts
import 'i18next';

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

I also recommend updating your i18next configuration to behave accordantly. https://www.i18next.com/overview/configuration-options#translation-defaults

i18next.init({
  returnNull: false,
   ...
});

3 replies

medihack Nov 15, 2022
Author

@pedrodurek Thanks for your help. Unfortunately, I have some Typescript problems after creating the i18next.d.ts file (in the root folder of my project) with the above content (of course, without the ...). Some imported types (e.g. import { Resource } from "i18next") can't be resolved anymore (Module '"i18next"' has no exported member 'Resource'). I also included the definition file in my tsconfig.json, but this doesn't solve the problem. Do you have an idea how to fix this?

pedrodurek Nov 15, 2022
Collaborator

Hey @medihack, try to place the type definition file under the src path, like in this example: https://github.com/i18next/i18next/blob/master/examples/typescript/@types/i18next.d.ts

medihack Nov 15, 2022
Author

Ah, ok. I get it now! Thanks a lot for the help again. I mark it as answered.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to v22.0.5 causes type errors because of t returning null #1866

{{title}}

Replies: 1 comment 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Upgrade to v22.0.5 causes type errors because of t returning null #1866

medihack Nov 13, 2022

Replies: 1 comment · 3 replies

pedrodurek Nov 14, 2022 Collaborator

medihack Nov 15, 2022 Author

pedrodurek Nov 15, 2022 Collaborator

medihack Nov 15, 2022 Author

medihack
Nov 13, 2022

Replies: 1 comment 3 replies

pedrodurek
Nov 14, 2022
Collaborator

medihack Nov 15, 2022
Author

pedrodurek Nov 15, 2022
Collaborator

medihack Nov 15, 2022
Author