React-i18next: Export 'WithTranslation' not found in 'react-i18next'

[rebeccaalpert]

🐛 Bug Report

We're getting the following TypeScript error when we try to import the type WithTranslation: "export 'WithTranslation' was not found in 'react-i18next'

To Reproduce

The import statement looks like this: import { WithTranslation, withTranslation } from 'react-i18next'; and we're trying to do something similar to this: https://github.com/i18next/react-i18next/blob/master/test/typescript/withTranslation.test.tsx#L9.

Expected behavior

We'd expect to be able to import WithTranslation and use it as a type.

Your Environment

• runtime version: node 10.16.2
• i18next version: 19.4.3
• os: Mac

[pedrodurek]

Hello! Did you check your react-i18next version? Because it's being exported here https://github.com/i18next/react-i18next/blob/master/src/index.d.ts#L80.

[rebeccaalpert]

Thanks! We upgraded and everything looks good on our end.

[rebeccaalpert]

Hey - we noticed that we're still getting some linter errors for "WithTranslation not found in 'react-i18next'" after upgrading. We upgraded to 11.7.3. Any idea what's up?

[pedrodurek]

Are you using @typescript-eslint/parser as well as @typescript-eslint/eslint-plugin?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alielkhateeb]

Hi @pedrodurek, I'm facing the same issue with WithTranslation and TFuncKey
I'm using @typescript-eslint/parser with @typescript-eslint/recommended in my config
I'm also on the latest react-i18next version 11.8.12

Edit: now facing it only with TFuncKey 😄

[pedrodurek]

Hey @alielkhateeb, I didn't manage to reproduce the error, could you create a minimalistic example on codesandbox? Thanks!

[alielkhateeb]

@pedrodurek I also tried a codesandbox but didn't manage to reproduce it, it's an ESLint error, it goes away if I use import type { TFuncKey } from 'react-i18next' have you faced it before?

[pedrodurek]

Hey @alielkhateeb, that's because the lint rule consistent-type-imports is turned on by default on @typescript-eslint/eslint-plugin.
Type-Only Imports and Export was introduced in typescript 3.8, which is used to prevent types import from "affecting" runtime (that'll depend on your typescript/babel setup).

This feature is something most users may never have to think about; however, if you’ve hit issues under --isolatedModules, TypeScript’s transpileModule API, or Babel, this feature might be relevant.

[alielkhateeb]

@pedrodurek Awesome, that makes sense! Thank you very much for your help :)