i18next: Add documentation for the new breaking change in TS

Documentation issue

Yesterday, there was a breaking change where now the t function is not returning a string anymore. It is returning a DefaultTFuncReturn. This is breaking a lot of things in my React app because I used to say that t would just return a string. In fact, it still does so when you use variables inside the string like this i18next.t('{{var}} something', { var }).

Motivation

I have researched and there is no documentation on why this change was made or how it would impact existing projects.

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 14
  • Comments: 17 (6 by maintainers)

Most upvoted comments

What I am finding here that makes all the problems go away is to: 1.) Update all packages for i18next and react-i18next to the latest. 2.) My current react-i18next.d.ts is exactly what follows this example: https://react.i18next.com/latest/typescript. 3.) Just change in your react-i18next.d.ts file:

declare module 'react-i18next' {

to:

declare module 'i18next' {

Everything is back to normal.

Well for example, I am using Material UI, and some props expect things to be string | undefined. If I pass a translated string to it, it will complain because the return type is DefaultTFuncReturn. And I don’t know if casting the translation result to a string is the cleanest solution…

In general, if you are using any 3rd party library and their props expect strings, this will be a problem.

@httpete and @DavidArmendariz - in the future, the best way to convey your case would be to PR a minimal breaking test - e.g. check out https://github.com/i18next/i18next/blob/master/test/typescript/t.test.ts#L39

If it is react related, check out something like https://github.com/i18next/react-i18next/blob/master/test/typescript/useTranslation.test.tsx and PR one there.

For our codebase update (which included mui 4) on a large codebase, I had only three or so TFunction changes (cast related), and ironically enough it exposed several (10-15) mui title attributes that were NonNullable but were never reported as problems (and they were indeed problems)…so it seems like an improvement overall, but I agree the default value will make less friction (#1853).

By PR’ing minimal breaking tests, it allows us to not only fix these now, but make sure we don’t have regressions later. Thanks for taking time to research the issue and trying out this major release.

The PR that I just opened should fix the problem, but I really recommend to follow the steps here https://www.i18next.com/overview/typescript, to get the best of i18next and react-i18next.

i18next has been the most stable api for so long of all the packages I use - I really hope that this change is making life better somehow.

JS api is still the same… only the TS interface did receive a major rewrite because of many “wishes” by the community… nevertheless it’s a semver major bump.

Please be patient and give the opportunity to @pedrodurek and @rosskevin to explain this TS change.