react-i18next: Type error with i18next@23.7.2+

🐛 Bug Report

The following error occurs:

error TS2741: Property ‘reportNamespaces’ is missing in type ‘import(“/tmp/test/node_modules/i18next/index”).i18n’ but required in type ‘import(“/tmp/test/node_modules/i18next/index”).i18n’.

More details: スクリーンショット 2023-11-13 18 54 36


No errors with i18next versions 27.6.0, 27.7.0, 27.7.1. I’m got errors with i18next versions 27.7.2, 27.7.3.

To Reproduce

The following three files are required to reproduce.

index.tsx:

import { createInstance } from 'i18next'
import type { ReactNode } from 'react'
import { initReactI18next, I18nextProvider } from 'react-i18next'

const i18n = createInstance()
await i18n.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  ns: ['common'],
  defaultNS: 'common',
  debug: false,
  interpolation: {
    escapeValue: false,
  },
  resources: { en: { common: {} } },
})

export function I18nextTestStubProvider({ children }: { children: ReactNode }) {
  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
}

package.json:

{
  "dependencies": {
    "i18next": "23.7.3",
    "react": "^18.2.0",
    "react-i18next": "^13.4.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.37",
    "typescript": "^5.2.2"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "strictNullChecks": true,
    "removeComments": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "."
  }
}

After creation, check with npm install && npx tsc --noEmit

Expected behavior

No type errors.

Your Environment

  • runtime version: node v18
  • i18next version: 23.7.3
  • os: Linux

Additionnal context

Probably the same as #1379. However, the cause seems to be different because multiple versions of i18next are not installed.

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Reactions: 5
  • Comments: 26 (14 by maintainers)

Commits related to this issue

Most upvoted comments

v14.0.0 has just been released that should make it optional

Got it working with the casting.

This works for me:

import { createInstance, i18n as I18N } from 'i18next'
import type { ReactNode } from 'react'
import { initReactI18next, I18nextProvider } from 'react-i18next'

const i18n = createInstance()
i18n.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  ns: ['common'],
  defaultNS: 'common',
  debug: false,
  interpolation: {
    escapeValue: false,
  },
  resources: { en: { common: {} } },
})

export function I18nextTestStubProvider({ children }: { children: ReactNode }) {
  return <I18nextProvider i18n={i18n as I18N}>{children}</I18nextProvider>
}

Did you try this?

import { i18n as I18N } from "i18next";
// ...
<I18nextProvider i18n={instance as I18N}>

seems this is because of the moduleResolution set to bundler… if you change it to NodeNext, it works