TS throw Type instantiation is excessively deep and possibly infinite when there are loads of keys in Trans component

[Ambrozy]

🐛 Bug Report

The same issue as: #1222
But appears in Trans component only.

To Reproduce

A codesandbox example.

Expected behavior

No typescript errors

Your Environment

• typescript: 4.35
• i18next: 21.3.3
• react-i18next: 11.13.0

Solution

Remove K generic.

    type I18nKeyType<N extends Namespace> = TFuncKey<N> extends infer A ? A : never;

    interface TransProps<N extends Namespace = DefaultNamespace, E extends Element = HTMLDivElement>
        extends React.HTMLProps<E> {
        children?: React.ReactNode;
        components?: readonly React.ReactNode[] | { readonly [tagName: string]: React.ReactNode };
        count?: number;
        defaults?: string;
        i18n?: i18n;
        i18nKey?: I18nKeyType<N> | I18nKeyType<N>[];
        ns?: N;
        parent?: string | React.ComponentType<any> | null; // used in React.createElement if not null
        tOptions?: {};
        values?: {};
        t?: TFunction<N>;
    }

    function Trans<N extends Namespace = DefaultNamespace, E extends Element = HTMLDivElement>(
        props: TransProps<N, E>,
    ): React.ReactElement;

[pedrodurek]

Hey @Ambrozy, this is a typescript limitation/bug that happens in cases where people have more than 22 namespaces. I managed to suppress the error by using the following approach extends infer A ? A : never for the TFuncKey type. Unfortunately, It seems the same workaround used for the t function doesn't work for the Trans component 😢 .

Just to give you an update, this limitation is being addressed in typescript 4.5, which they plan to officially release sometime in November. In the meantime, I'll look into your suggestion and test the results, thanks!

[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.

[pedrodurek]

Hey @Ambrozy and @adrai, I'll rollback the changes here, @Ambrozy my advice to you is to wait until typescript 4.5 is officially released (it'll happen this month), it'll fix your issue.

[xseignard]

@pedrodurek Hi there! I tried to update a codebase from typescript 4.2.4 to 4.5.2 and the bug reappeared
I can confirm it is related to the number of JSON files we have (~50 in our case)

[pedrodurek]

Hey @xseignard, have you tried to update the react-18next version? It may be related #1407