Type errors when doing interpolation in react-typescript/simple

[adr29truck]

🐛 Bug Report

Using the simple react-typescript example and introducing a variable to interpolate in the translation file causes Type instantiation is excessively deep and possibly infinite. or 'TFunctionDetailedResult<never>' is not assignable to type 'ReactI18NextChild | Iterable<ReactI18NextChild>'. Property '[Symbol.iterator]' is missing in type 'TFunctionDetailedResult<never>' but required in type 'Iterable<ReactI18NextChild>' to be raised

To Reproduce

Using the simple react-typescript example in this repo, introduce a variable in the translation file

{
  "title": "Welcome to react using react-i18next fully type-safe",
  "description": {
    "part1": "This is a simple example. {{hello}}",
    "part2": "😉"
  }
}

then in app.tsx try accessing description.part1 using the t function derived from useTranslation.

<p>{t('description.part1', {hello: 'string'})}</p>

or

<p>{t('translation:description.part1', {hello: 'string'})}</p>

respectively.

See this commit adr29truck@24a615a on fork

Expected behavior

It should not raise type errors.

Your Environment

• runtime version: node v16.13.0, chrome
• i18next version: ^22.4.3
• react-i18next version: ^12.1.1
• os: Mac

[adrai]

Sorry, but I'm not able to reproduce it...
98b118b#diff-ac4dc9bfd1bf289f94946a467ac5c76f365692d68cc9ca9258f7c6396a598f9e

[adr29truck]

@adrai Thanks for taking a look.

So when checking out the new commit, It raises an error in VSCode only. Typescript does not fail to compile.
If I however try using translation:title instead of title as the key then typescript fails to compile all together with the second error. (see screenshot)

If I then provide it a deaultValue (so we get {name: 'John', defaultValue: 'Adam'}) the second error goes away and it now only raises Type instantiation is excessively deep and possibly infinite. but does not fail to compile.

[adrai]

fyi: this works:

[adr29truck]

fyi: this works:

Yeah, that compiles, but it still raises the possibly infinite error

[marakim]

I am also seeing this problem on "i18next": "^22.4.6"

[marakim]

Any form of interpolation gives the "excessively deep" type error.

[marakim]

This is with "react-i18next": "^12.1.1"

[pedrodurek]

Hey @adr29truck, I also didn't manage to reproduce it, and I'm using the latest vscode version. My assumption is that there is a conflict with one of your vscode extensions. Could you share your extension list, please?

[farmerpaul]

In my experience, this issue occurs both in VS Code, and when running tsc – @adrai's suggested workaround doesn't work to solve the issue in either case.

However, the moment I downgraded react-18n from v12 to v11.18.6, it was solved, and that suits me fine for now.

[DumasOlivier]

Exactly the same error here ...
"i18next": "^22.4.9" "react-i18next": "^12.1.4"

[DumasOlivier]

Update, I managed to make it work using this code:

// Type instantiation is excessively deep and possibly infinite.ts(2589)
<div>
  {t('key2', {count: myCounter})}
</div>

// No error
import {Trans, useTranslation} from 'react-i18next';

...
  const {t} = useTranslation('key1');
...

<div>
  {Trans({t, i18nKey: 'key2', count: myCounter})}
</div>

[cainlevy]

I solved this by updating to at least typescript@4.7.2.

[bencerf]

I solved this by updating to at least typescript@4.7.2.

Confirmed ! We could not use more than 45 namespace/.json files...
We had this problem in our project using typescript@4.6.3 by, after bumping, no more problem.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[bencerf]

I solved this by updating to at least typescript@4.7.2.

Confirmed ! We could not use more than 45 namespace/.json files... We had this problem in our project using typescript@4.6.3 by, after bumping, no more problem.

Well.. we still have problem ! We temporally fix the problem with the workaround 1 & 2 listed here : #1417 (comment).
Like @adr29truck said, it compiles but it still raises the possibly infinite error warning...

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[bencerf]

@adrai do we have any news about this issue ? It still compiles but still raises the possibly infinite error warning...

[adrai]

As soon as this PR (and this) lands, we can get to this.

[bencerf]

Amazing, thanks a lot for the follow-up !

[bencerf]

As soon as this PR (and this) lands, we can get to this.

@adrai I see that this PR is still in Draft but you close this issue. I means Type instantiation is excessively deep and possibly infinite. is now fixed or still raises the possibly infinite error warning ?

Thanks in advance for your answer 🙂

[adrai]

@MiryksV with the next major release this is fixed