react-i18next: i18n object is not typed at all in V12

After updating to v12 and following the instructions here, I get the following TS errors:

const {i18n} = useTranslation();

i18n.language
i18n.changeLanguage
^^^ TS2339: Property 'language' does not exist on type 'i18n'.
error TS2339: Property 'changeLanguage' does not exist on type 'i18n'.

and in the initialize function, as well

i18n.use(initReactI18next).init({
   // ...
});

TS2339:  Property 'use' does not exist on type 'typeof import("/Users/me/project/src/i18next")'.

But those properties are clearly there when you console.log(i18n), along with lots of others. It appears that the i18n object returned by useTranslation has not been typed at all.

How do I set up the i18next.d.ts file so that the i18n object returned by useTranslation() is properly typed?

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 15 (5 by maintainers)

Most upvoted comments

I think I found the cause while doing a minimal reproduction and copying over more and more of my real config to it.

I think the problem is the i18next.d.ts file in the root of my project, that version 22 makes me add. When that file is added, then all import x from "i18next" lines imports this file instead of the node module.

Since that module doesn’t actually declare anything inside of the i18next module, it will not find any functions in the other files.

I moved it to a @types/ directory, and not it seems to be working again.

I still don’t know why import _ from "i18next" would pick up this file in my repo but not in my minimal reproduction.

+13

Mange on Dec 29, 2022

I have my d.ts file in @types/ but I still have the same issue. Did anyone solve it?

“typescript”: “4.9.5” “i18next”: “22.4.12” “react-i18next”: “12.2.0”

UPD: Works only if I put it into global.d.ts instead, maybe it will help someone as a workaround

vashchukmaksim on Mar 19, 2023

Hello guys, I have the same issue: Versions I use: "i18next": "22.0.5" "react-i18next": "12.0.0" "typescript": "3.9.10"

Is there any solution?

billorer on Nov 22, 2022

Hey @vashchukmaksim, just add @types to your tsconfig.json file under include:

"include": [
  "src",
  "@types"
]

pedrodurek on Apr 18, 2023

I fixed it with typescript upgrade. I have 4.1.6 now and everything works fine 😃

Kretiss on Nov 22, 2022

@pedrodurek I have this problem too.

i18n.ts file

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import csGlobal from './config/i18n/cs.json'
import skGlobal from './config/i18n/sk.json'

export const defaultNS = 'global';
export const resources = {
  cs: {
    global: csGlobal,
  },
  sk: {
    global: skGlobal,
  }
} as const;

const options = {
  // lng: '', user.language
  fallbackLng: 'cs',
  ns: ['global'],
  load: 'languageOnly',
  interpolation: {
    escapeValue: false,
    formatSeparator: ',',
  },
  defaultNS,
  resources,
}

i18n.use(initReactI18next)

if (!i18n.isInitialized) {
  i18n.init(options)
}

export default i18n

i18next.d.ts file

import 'i18next';
import { resources, defaultNS } from './i18n';

declare module 'i18next' {
  interface CustomTypeOptions {
    defaultNS: typeof defaultNS;
    resources: typeof resources['cs'];
  }
}

Both files are under src directory in app

And it complains about this obrazek

detailed info:

TS2339: Property 'use' does not exist on type 'typeof import("/Users/tomaskretek/inQool/som.inqool.cz-client/node_modules/.pnpm/i18next@22.0.5/node_modules/i18next/index")'.

TS2339: Property 'isInitialized' does not exist on type 'typeof import("/Users/tomaskretek/inQool/som.inqool.cz-client/node_modules/.pnpm/i18next@22.0.5/node_modules/i18next/index")'.

TS2339: Property 'init' does not exist on type 'typeof import("/Users/tomaskretek/inQool/som.inqool.cz-client/node_modules/.pnpm/i18next@22.0.5/node_modules/i18next/index")'.

Kretiss on Nov 14, 2022