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
- Another attempt to fix the TypeScript error for translations Bug tracker: https://github.com/i18next/react-i18next/issues/1601 — committed to FlorianLeChat/Domego by FlorianLeChat a year ago
I had also some errors* after upgrading the i18next dependencies, but I was able to solve them all by declaring two modules as below:
I also added
returnNull: false
to the i18n.init function.*i.e.
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 exposeresources
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.0next
: 13.1.6i18next
: 22.4.9react-i18next
: 12.1.5next-i18next
: 13.1.4Path:
<root>\@types\i18next.d.ts
Path:
<root>\next-i18next.config.js
I finally just ignored it. with
@ts-ignore
. there is no other error or problem anymore.Indeed, thanks! Using
next-i18next
onv12.1.0
works just fine. Note that it is not needed to addreact-i18next
nori18next
as dependencies when usingnext-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 toreact-i18next@11.18.6
and addingto
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 andreact-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:
@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!
regarding intellisense: https://github.com/microsoft/TypeScript/issues/54708
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.
withreact-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"'.
errorTFunction
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.