react-i18next: Type instantiation is excessively deep and possibly infinite.ts(2589)

🐛 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

About this issue

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

Commits related to this issue

Most upvoted comments

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

This issue is still relevant.

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

The next major version of i18next should fix that

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; } } `

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.

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" ],
  },
};

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

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

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 react-i18next@11.18.6 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.

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.

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

@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: https://github.com/microsoft/TypeScript/issues/54708

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

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