Type instantiation is excessively deep and possibly infinite.ts(2589)

[xdebbie]

🐛 Bug Report

After updating react-i18next from [11.16.2] to [12.1.1], I have started getting an error on the useTranslation bit of the following line:

const { t } = useTranslation('trans');

The error is: Type instantiation is excessively deep and possibly infinite.ts(2589)

I can ignore it by using /* @ts-ignore */ but that's not ideal. The error started appearing after the update and it's only on this single file (the whole app uses translation in the exact same way but strangely I am only getting this error here).

To Reproduce

Cannot reproduce

Home.tsx

import { useTranslation } from 'react-i18next';

const Home = () => {
  const { t } = useTranslation('trans');

  return (
    <div>
      <div>{t('home.firstLine')}</div>
      <div>{t('home.secondLine')}</div>
    </div>
  );
};

export default Home;

init-i18next.js

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as fr from '@static/translations/fr.json';
import * as en from '@static/translations/en.json';

const resources = {
  fr: {
    trans: fr
  },
  en: {
    trans: en
  }
};

const lng = navigator ? navigator.language.substring(0, 2) : 'fr';

i18next.use(initReactI18next).init({
  lng, // as default
  fallbackLng: 'fr',
  defaultNS: 'trans',
  resources,
  compatibilityJSON: 'v3',
  interpolation: {
    escapeValue: false
  }
});

export default i18next;

i18next.d.ts

import { resources, defaultNS } from './i18next';

declare module 'i18next' {
  interface CustomTypeOptions {
    defaultNS: typeof defaultNS;
    resources: typeof resources['fr'];
  }
}

Expected behavior

No errors were expected, like I had before the package update.

Your Environment

• runtime version: React 18.0.0
• i18next version: 22.4.6
• react-i18next version: 12.1.1
• os: Mac

[xdebbie]

Update: I've tried all latest release versions and the problem starts occurring from v12.0.0

[marakim]

I can confirm this problem occurs for me as well on the following configuration:

• i18next: 22.4.6
• react-i18next: 12.1.1
• react: 17.0.44
• OS: Windows

[xdebbie]

@marakim it's definitely something with react-i18next v12.0.0+

[AlexKrupko]

The same issue for me after upgrading i18next from 21.x to 22.x and react-i18next from 11.x to 12.x version. I din't find a solution and was forced to downgrade back to previous versions.

[pedrodurek]

Hey @xdebbie, jugging by what you shared, it seems in the i18next.d.ts file you're importing resources from the wrong file, ./i18next instead of ./init-i18next. Also, don't forget to expose resources and that the file must be a typescript file.

The others who are facing the same issue, please take a look at our examples here or provide minimal reproducible example. It's very likely that you miss a step in your configuration.

[hungtcs]

+1

{
  "i18next": "^22.4.9",
  "react-i18next": "^12.1.4" 
}

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

[GustavoRochaSantos]

To solve that, is just create a @type file with typeof resources.

`import { resources, defaultNS } from "translation/config";
import ptbr from "translation/locales/ptbr";

declare module "i18next" {
interface CustomTypeOptions {
defaultNS: typeof defaultNS;
resources: typeof ptbr;
}
}
`

[FlorianLeChat]

I still have the same issue despite having tried many solutions...

react : 18.2.0
next : 13.1.6
i18next : 22.4.9
react-i18next : 12.1.5
next-i18next : 13.1.4

Path: <root>\@types\i18next.d.ts

import "i18next";
import type common from "@public/locales/en/common.json";

declare module "i18next"
{
  interface CustomTypeOptions
  {
    defaultNS: "common";
    resources: {
      common: typeof common;
    };
    returnNull: false;
    returnEmptyString: false;
  }
}

Path: <root>\next-i18next.config.js

// @ts-check

/**
 * @type {import("next-i18next").UserConfig}
 */
module.exports = {
  debug: process.env.NODE_ENV === "development",
  reloadOnPrerender: process.env.NODE_ENV === "development",
  localePath: typeof window === "undefined" ? require( "path" ).resolve( "./public/locales" ) : "/locales",
  18n: {
    defaultLocale: "en",
    locales: [ "en", "fr" ],
  },
};

[GoldenSoju]

I had also some errors* after upgrading the i18next dependencies, but I was able to solve them all by declaring two modules as below:

src/@types/i18next.d.ts

import { resources, defaultNS } from './i18n';

declare module 'react-i18next' {
  interface CustomTypeOptions {
    defaultNS: typeof defaultNS;
    resources: typeof resources['en'];
  }
}

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

I also added returnNull: false to the i18n.init function.

*i.e.

1. Type instantiation is excessively deep and possibly infinite
2. Argument of type 'DefaultTFuncReturn' is not assignable to parameter of type xyz

[hayate]

Thank you @GoldenSoju the two modules method worked for me too.

The first module solved: Argument of type 'DefaultTFuncReturn' is not assignable to parameter of type xyz
The second module solved: Type instantiation is excessively deep and possibly infinite on useTranslation();

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

[Kodnot]

I am also facing similar issues. The solution from @GoldenSoju seems to remove the typings completely, with that configuration I can pass whatever to t and it won't complain :/ Reproduced with i18next 22.4.12 and react-i18next 12.2.0.
Edit: Downgrading to [email protected] and adding

declare module "react-i18next" {
    interface CustomTypeOptions {
        defaultNS: typeof DEFAULT_NS;
        resources: typeof resources["lt"];
    }
}

to react-i18next.d.ts resolved the issue for one project, with all typings working properly and no TS errors. For another project this lead to the same issues with type instantiation.

[FlorianLeChat]

I can also confirm that, version prior to 11.18.6 solves all my typing issues.

[femaury]

I can also confirm that, version prior to 11.18.6 solves all my typing issues.

@FlorianLeChat did you only downgrade react-i18next to 11.18.6 or next-i18next as well?

Am using
next: 12.3.4
i18next: 22.4.13
next-i18next: 13.2.2
react-i18next: 11.18.6
typescript: 4.9.5
and still (was the same with react-i18next: 12.1.5) getting the type instantiation error...

@pedrodurek any updates on merging i18next/i18next#1911? 😊

[FlorianLeChat]

@FlorianLeChat did you only downgrade react-i18next to 11.18.6 or next-i18next as well?

I downgraded next-i18next to version 12.1.0 (because this version seems to have been released in the same period) and react-i18next to version 11.18.6 and I don't seem to have any issues on my end. Honestly, even if this workaround works I don't think to apply it on my projects using i18n because versions used are pretty old and I'm tired of fighting by wasting hours to fix a stupid type check when it should be achieved in 5 minutes...

[femaury]

I downgraded next-i18next to version 12.1.0 (because this version seems to have been released in the same period) and react-i18next to version 11.18.6 and I don't seem to have any issues on my end. [...]

Indeed, thanks! Using next-i18next on v12.1.0 works just fine.
Note that it is not needed to add react-i18next nor i18next as dependencies when using next-i18next v12, that was a change made in v13 (moving them to peer dependencies).

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

[FlorianLeChat]

This issue is still relevant.

[gmaxlev]

Is it really possible to solve this problem? I think there is some kind of limitation in TypeScripts, because I got this problem when my number of namespaces reached 100. I have to use a JS script to parse the locale files to generate a TS file with keys. I think you should note this problem in the documentation because a lot of people rely on typing.

[adrai]

Is it really possible to solve this problem? I think there is some kind of limitation in TypeScripts, because I got this problem when my number of namespaces reached 100. I have to use a JS script to parse the locale files to generate a TS file with keys. I think you should note this problem in the documentation because a lot of people rely on typing.

@pedrodurek is on it here: i18next/i18next#1911

[syblock]

I finally just ignored it. with @ts-ignore. there is no other error or problem anymore.

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

[herbievine]

I'm still having this issue...

next-i18next: ^13.2.2
react-i18next: ^12.2.0
i18next: ^22.4.13

Although after digging through my code a bit, I noticed some components have the issue and some simply don't, and sometimes the issue is only displayed when using an array instead of a string...

My config:

import "i18next";
import common from "../../public/locales/en/common.json";
import auth from "../../public/locales/en/auth.json";
import dashboard from "../../public/locales/en/dashboard.json";
import profile from "../../public/locales/en/profile.json";
import pods from "../../public/locales/en/pods.json";
import kyc from "../../public/locales/en/kyc.json";
import marketplace from "../../public/locales/en/marketplace.json";
import passport from "../../public/locales/en/passport.json";
import proposals from "../../public/locales/en/proposals.json";
import { UseTranslation } from "next-i18next";
import { Namespace } from "i18next";

declare module "i18next" {
  interface CustomTypeOptions {
    defaultNS: "common";
    resources: {
      common: typeof common;
      auth: typeof auth;
      dashboard: typeof dashboard;
      profile: typeof profile;
      pods: typeof pods;
      kyc: typeof kyc;
      marketplace: typeof marketpace;
      passport: typeof passport;
      proposals: typeof proposals;
    };
  }
}

Example of array vs string args:

import { useTranslation } from "next-i18next";
import React from "react";

export default function Members({ members, maxToDisplay = 5 }: MembersProps) {
  const { t } = useTranslation(["pods"]); // <-- works fine
  const { t } = useTranslation("pods"); // <-- type instantiation is excessively deep and possibly infinite??????

  return (
    <Container>
      ...
    </Container>
  );
}

[adrai]

The next major version of i18next should fix that

[adrai]

Please try with i18next v23.0.1 and react-i18next v13.0.0

[FlorianLeChat]

All my issues seem to be fixed. Thanks a lot!

[ste7en]

It didn't solve my issue. @adrai is there a specific typescript version I should use? I'm using ˆ5.0.4

[adrai]

@ste7en v4 and v5 should work.... can you please provide a minimal reproducible example?
compare also with: https://github.com/i18next/react-i18next/tree/master/example/react-typescript/simple

[ste7en]

@adrai thanks for the willingness. I was preparing a monorepo example with Nx (used in my real workspace) and while waiting for it to complete I tried adding "resolveJsonModule": true to the base tsconfig of the whole workspace and it solved the issue. Setting it only in the library responsible for localisation is not enough.

[sebastien-comeau]

I'm trying to embed i18next type definitions within our application but I have mutliple issues. The main issue is Type instantiation is excessively deep and possibly infinite. with react-i18next Trans component. It seems to go away if I remove random keys from my JSON files but I can't put my finger on the actual cause.

I also have the following issues:

• Type '"home"' is not assignable to type '"common"'. error
• TFunction intellisense doesn't recommend keys.

Here's my minimal reproducible example that is based on next-i18next simple example:
https://github.com/sebastien-comeau/i18next-typescript

[adrai]

@sebastien-comeau using the same keys with the t function works, right?
I suspect this only happens with the Trans component...
@pedrodurek that's another thing we need to check

[sebastien-comeau]

@adrai: Using a good key with TFunction works but intellisense doesn't help while coding. Intellisense recommends keys with Trans component though. 🤷

[adrai]

regarding intellisense: microsoft/TypeScript#54708

[pedrodurek]

Hey @sebastien-comeau, this will fix your issue. Thanks for the reproducible example, I wouldn't be able to find the cause without it!

[adrai]

@sebastien-comeau try v13.0.1 and let us know 😉

[sebastien-comeau]

@sebastien-comeau try v13.0.1 and let us know 😉

@adrai, problem seems to be resolved. Thanks for the collaboration. :)

Intellisense still an issue for now: microsoft/TypeScript#54708

[jamby77]

Hey, I have this issue in very specific case: only if the key or part of it is dynamic string
Example:

  "months": {
    "1": "January",
    "2": "February",
    "3": "March",
     ...
  }

If I do:
t(`months.1`)
everything is fine, but if I call it like:
t(`months.${monthId}`)
I get the "error TS2589: Type instantiation is excessively deep and possibly infinite."

Versions:

    "i18next": "^23.2.11",
    "react-i18next": "^13.0.2",

[adrai]

@jamby77 create a minimal reproducible example repository and open a new issue