Usage with TypeScript: Typing useTranslation hook

[velialiev]

🐛 Bug Report

I've tried to use i18next with TypeScript but I faced an issue in useTranslation hook typing. I type it exactly like in docs: I create d.ts file, import json locale there, merge default Resourse interface with my own one and add namespace: typeof locale there.

But instead of correct types I have this error:
TS2589: Type instantiation is excessively deep and possibly infinite.

Sometimes it works fine and show correct hints, but anyway it requires a very long time to update after I am adding something to locale.

To Reproduce

Just describe types like described in docs: https://react.i18next.com/latest/typescript#create-a-declaration-file

Expected behavior

Types should work correctly: They shouldn't throw any errors and should update faster

Your Environment

• runtime version: node v15.14.0
• i18next version: v20.2.1
• react-i18next version: v11.8.13
• os: Mac
• TypeScript: v4.2.4

[velialiev]

[ImADrafter]

Hello @velialiev; The default NS for react-i18next is called "translation", not "translations". If you use a different default NS, for the moment, you must specify which one you are using.

TLTR: Rename "translations" to "translation" or call the useTranslations hook with your NS, "translations".

[velialiev]

Hello @velialiev; The default NS for react-i18next is called "translation", not "translations". If you use a different default NS, for the moment, you must specify which one you are using.

TLTR: Rename "translations" to "translation" or call the useTranslations hook with your NS, "translations".

Hello, thank you for your answer. I've renamed "translations" to "translation" everywhere, but still have the same problem. Also, even if I specify the NS I'm using explicitly by passing it's name in useTranslation hook problem still appears

[ImADrafter]

Hello, thank you for your answer. I've renamed "translations" to "translation" everywhere, but still have the same problem. Also, even if I specify the NS I'm using explicitly by passing it's name in useTranslation hook problem still appears

Hm so I was wrong then @velialiev ! Would you mind to fill up a codesandbox so we can check what's wrong ?

[velialiev]

Hello, thank you for your answer. I've renamed "translations" to "translation" everywhere, but still have the same problem. Also, even if I specify the NS I'm using explicitly by passing it's name in useTranslation hook problem still appears

Hm so I was wrong then @velialiev ! Would you mind to fill up a codesandbox so we can check what's wrong ?

Hi, sorry for the late reply, I'll try it to fill it up tommorow. The problem is that in my current project almost everything works fine. My IDE shows correct hints but only after I press ctrl + s in JSON file on my own, although it never required this. Sometimes I even must press it several times. I'm using Intellij IDEA.

I'm afraid I do something wrong, because it's very strange that in this project everything works and in that one that i described above I have an error. I'm using same config for them...

I'll try my best to reproduce and explain this problem

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

[paulmthiebauth]

@velialiev What ended up being the issue here?

[martijnpieters]

Enabling this setting in tsconfig.json solved the problem for me:

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

[velialiev]

Hi there!

@velialiev What ended up being the issue here?

I stopped dealing with this problem from that moment cause I have not used localization since then

I think @martijnpieters 's answer is right. I tested this now and saw a direct correlation between disabling this option and getting the error

@martijnpieters, thanks alot :)

@paulmthiebauth @ImADrafter