react-i18next: `TS2589: Type instantiation is excessively deep and possibly infinite.` with Typescript 4.5.2 and react-i18next 11.14.3

Ok, now I think I fixed it on my own repository too. Seems that my import path on the d.ts file was incorrect, but typescript was not complaining and just saying it was “any”. How embarrassing. After I fixed the path now I get what looks like proper types and error messages. I have now hundreds of those, but most are because the t function doesn’t seem to be returning a string

The typescript team improved the way recursive types work, but it seems there are still some limitations. I’ll try to find a workaround to suppress the error.

Hey guys, I didn’t manage to find a way to suppress the error, typescript team increased the number of recursive type instantiations from 50 to 100 (on TS 4.5), but it’s not enough for 45+ namespaces. The workaround (extends infer A ? A : never) that I’ve been using to suppress the error works, but only when you call a function directly, not rendering as JSX 😢 . But I have a few suggestions that should work:

1 - Call Trans function directly when useTranslation receives an array:

const { t } = useTranslation(["ns1"]);

return (
  <div className="App">
    {Trans({ t, i18nKey: "ns1:name", children: <h1>Weird</h1> })}
  </div>
);

2 - Add a ts-ignore (don’t recommend)

<div className="App">
  {/* @ts-ignore */}
  <Trans i18nKey="ns10:name" t={t}>
    <h1>Weird</h1>
  </Trans>
</div>

3 - Use patch-package, to increase the number of instances here to something like:

if (instantiationDepth === 200 || instantiationCount >= 5000000) {

You can find more info about the discussion here: https://github.com/microsoft/TypeScript/issues/34933

fyi: https://github.com/i18next/react-i18next/pull/1501

Experienced the same issue, the reason was similar to the one @danielo515 had. In my case, it happened due to unexported resources:

Hi So we ended up relying on option 1 described in @pedrodurek’s comment

And got rid on of the annoying TS2589 error. Tested on TypeScript 4.5.5

Hello @pedrodurek , thanks for your answer.

This is my react-i18next.d.ts contents:

import 'react-i18next';
import translation from './locales/en/translation.json';
import toast from './locales/en/toasts.json';
declare module 'react-i18next' {
  interface CustomTypeOptions {
    defaultNS: 'translation';
    resources: {
      translation: typeof translation;
      toast: typeof toast;
    };
  }
}

If you have a condesandbox template I will happily try to reproduce my problem there.

Edit: Best solution is to update to version 12. It finally fixes this problem.

I found two workarounds to get rid of the error when using the useTranslation() hook. Just type the hook. Hope that helps someone.

// before
const {t} = useTranslation(['foo', 'bar'])

// workaround 1 - explicit typing
const {t} = useTranslation<['foo', 'bar']>(['foo', 'bar'])
// or
const {t} = useTranslation<('foo' | 'bar')[]>(['foo', 'bar'])


// workaround 2 - use any
const {t} = useTranslation<any>(['foo', 'bar'])

Hey @danielo515, that can also happen if there is something wrong with your configuration (react-i18next.d.ts), can you share a simplified version of your configuration on codesandbox?