Regression report: 22->23 broke TypeScript autocomplete in our project

[hornta]

🐛 Bug Report

Seems to have stopped working when we upgraded i18next from version 22 to 23.

Typescript in my IDE(vscode) doesn't seem to be working anymore/freezing/stuck loading when I try to autocomplete translation strings inside of the t function.

const { t } = useTranslation();

t("...")

I'm only getting a tooltip Loading... that never seems to resolves and if I move my cursor to another thing I want to inspect in TypeScript it's still "broken" or stuck. I can't even use "Goto definition" anymore. It seems like Typescript in total is just frozen and the only thing that helps is Reload window commando in vscode. The Restart TS server doesn't seems to be able to fix it most of the times.

When I idle long enough in vscode, the problems panel fills up with lots of Excessive complexity comparing types and most of them seems to come from the translation strings as I can see in the errors.

We got 1170 translation keys.

---

I founds this comment in another issue and so I tried to fix our version of i18next to 23.3.0 to try and see it if worked and it did. I tried to bump it up to 23.4.1 which made autocomplete fail again so the error must have been coming back in here somewhere: v23.3.0...v23.4.1

We will pin version to 23.3.0 for now.

To Reproduce

Expected behavior

I expect to get autocompletes for my translation strings OR that I don't get it and typescript continues working in my IDE.

Your Environment

• runtime version: browser Chrome
• i18next version: 23.7.11
• os: Windows
  

[adrai]

please provide a minimal reproducible example repository...

maybe related:
#1921
#1972

[SeanCassiere]

Hope this reproduction helps.

https://stackblitz.com/edit/stackblitz-starters-fhuda1?file=src%2Fi18next.d.ts

[adrai]

I suspect you have some typescript version mismatch.... react-scripts does not yet support TS > 5.x
and using inline translation resources seems to work: https://stackblitz.com/edit/stackblitz-starters-yhwehg?file=src%2Fi18next.d.ts,public%2Flocales%2Fen%2Ftranslation.json,src%2FApp.tsx

[SeanCassiere]

Inited a new repro with vite and typescript at 5+ (with no traces of react-scripts).
Repro: https://stackblitz.com/edit/vitejs-vite-btw1as?file=src%2FApp.tsx

I agree that the inline translations seem to fix the ts errors in the editor.

However, it doesn't seem feasible to maintain synced copies of your translations in both the public folder (for code-splitting and bundle sizing benefits) and the i18next.d.ts file manually.

If this method/type of typescript support (as mentioned in the docs) is no longer available, maybe that should go out in a major version change? and not a minor change.

[adrai]

it might be a problem with the stackblitz setup... I just tried locally and also on codesandbox and it works: CSB

[SeanCassiere]

it might be a problem with the stackblitz setup... I just tried locally and also on codesandbox and it works: CSB

Whilst your CSB example solves it, it's on Typescript 4.9.5, and NOT 5 and above.

I've got a single project set up locally with i18next@23.6.0 and typescript@5.3.3 where everything is working as expected. Its the move to i18next@23.7.12, with its shipped TS changes that ends up breaking stuff.

Could you confirm this behaviour with a typescript@^5.3.3 and i18next@23.7.12 setup?

[adrai]

just updated to TS v5.3.3 and still works: CSB

[SeanCassiere]

23.7.14 fixed everything for me