i18next: Type instantiation is excessively deep and possibly infinite

๐Ÿ› Bug Report

Iโ€™m getting the error Type instantiation is excessively deep and possibly infinite when defining CustomTypeOptions.

My type definition:

// i18next.d.ts
import resources from "../i18n/locales/resources";

declare module "i18next" {
	interface CustomTypeOptions {
		returnNull: false;
		resources: typeof resources['en'];
	}
}

where resources are:

// i18n/locales/resources
import definitions_de from './definitions/de.json';
import definitions_en from './definitions/en.json';
import errors_de from './errors/de.json';
import errors_en from './errors/en.json';

export const resources = {
	de: {
		definitions: definitions_de,
		errors: errors_de,
	},
	en: {
		definitions: definitions_en,
		errors: errors_en,
	},
<etc.>
}

In my code, Iโ€™m doing:

// src/myCode
const t = i18nInstance.getFixedT(this.locale as Locale);

throw new Error(t('index.edgeError'));

Expected behavior

I would expect the type definition to work. And the code to compile. However, while I donโ€™t get any tslint errors, my tests are failing with the error Type instantiation is excessively deep and possibly infinite, which also shows up (sometimes) in VS Code.

Your Environment

  • runtime version: node16
  • i18next version: โ€œ^22.4.10โ€, โ€œtypescriptโ€: โ€œ^4.9.5โ€,
  • os: Mac

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 5
  • Comments: 20 (7 by maintainers)

Most upvoted comments

waiting for @pedrodurek

@adrai @pedrodurek please see https://github.com/esetnik/react-i18next/tree/repro-%231921.

Steps to reproduce:

  1. checkout repro branch
  2. cd example/react-typescript/simple-multi-namespaces
  3. npm install
โฏ npm run build

> simple-multi-namespaces@1.0.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

TS2589: Type instantiation is excessively deep and possibly infinite.
    18 |   const { t } = useTranslation();
    19 |
  > 20 |   return <div>{prop ?? `${t('labels.complete')}`}</div>;
       |                           ^^^^^^^^^^^^^^^^^^^^
    21 | };
    22 |
    23 |