question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

i18n object is not typed at all in V12

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:12 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
billorercommented, Nov 22, 2022

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?

1reaction
Kretisscommented, Nov 14, 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")'.

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeScript - react-i18next documentation
In order to fully type the t function, we recursively map all nested keys from your primary locale files or objects. Depending on...
Read more >
Angular Internationalization
Internationalization, sometimes referenced as i18n, is the process of designing and preparing your project for use in different locales around the world.
Read more >
How to type check i18n dictionaries with TypeScript?
at an example of string interpolation. 1. Key lookup: return type. // returns property value from object O given property path T, otherwise ......
Read more >
How To Use ngx-translate with Angular - DigitalOcean
The translation file is a JSON object of key-value pairs, where the key describes the text that is translated, and the value is...
Read more >
Next.js 13 Upgrade Guide
Move any beforeInteractive scripts you previously included in _document.js to the root layout file ( app/layout.tsx ). The experimental worker strategy does not...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found