Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Micro-sun opened this issue Jul 2, 2024 · 2 comments
Open

Comments

@Micro-sun
Copy link

Micro-sun commented Jul 2, 2024

use "react-i18next": "^11.16.3", but have an error "Type instantiation is excessively deep and possibly infinite.ts(2589)"
or have one meet before?

@adrai
Copy link
Member

adrai commented Jul 2, 2024

Update all i18next dependencies.
If you still have that issue, please provide a minimal reproducible example repository.

@lucas-dtrn
Copy link

lucas-dtrn commented Jan 6, 2025

Issue

When calling const { t } = useTranslation(); in a React application using i18next, I encountered the following TypeScript error: Type instantiation is excessively deep and possibly infinite

This issue only occurred when the translation JSON file was heavily nested.

Steps to Reproduce

Create a JSON file with deeply nested translation objects (e.g., five or more levels deep).

  1. Load the file into your React application using i18next.
  2. Import and call useTranslation() in a React component.
  3. Observe that TypeScript sometimes reports the error: Type instantiation is excessively deep and possibly infinite

Suggested Solution

Flatten your nested JSON keys using dot notation. For example, convert:

{
  "page_1": {
    "title": "This is a title.",
    "description": "This is a description",
    "button": "Click me!"
  }
}

into:

{
  "page_1.title": "This is a title.",
  "page_1.description": "This is a description",
  "page_1.button": "Click me!"
}

By doing so, TypeScript can handle the translation types without exceeding recursion limits.

Additional Context

  • I wrote a custom function to perform the flattening, but there are existing packages that handle this task.
  • After flattening, my file with 517 lines (and up to five levels of nesting) worked fine with no errors.
  • The exact maximum nested size before hitting the TypeScript limit is unclear, but flattening appears to be a reliable workaround.

Environment

  • i18next version: ^15.0.2
  • React version: ^18.2.0
  • TypeScript version: 5.7.2

Possible Workarounds

  • Use an existing package to flatten your JSON files automatically.
  • Keep nesting to a minimum in your translation files.

Please let me know if there are any further details I can provide!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants