Importing useTranslation breaks JSX prop types across unrelated components

[dytra]

🐛 Bug Report

Importing useTranslation from next-i18next causes TypeScript to throw incorrect lint/type errors across unrelated JSX components, especially affecting props like className or children.

To Reproduce

Steps to reproduce the behavior:

1. Use Next.js with the Pages Router and TypeScript
2. Install next-i18next@15.4.2
3. In a .tsx file, import useTranslation:

import { useTranslation } from 'next-i18next';

Suddenly, TypeScript in VSCode begins throwing unrelated errors in component JSX such as:

Type '{ className: string; }' is not assignable to type ...
Property 'className' does not exist on type ...

Example 1 (custom TabsList)

import { useTranslation } from 'next-i18next';

<TabsList className="mx-auto" /> // ❌ TS error: Property 'className' does not exist...

Example 2 (ShadCN UI Label)

import { useTranslation } from 'next-i18next';

<Label className="label">Jangka waktu (tahun)</Label>

// VSCode error:
Type '{ className: string; }' is not assignable to type 'IntrinsicAttributes & LabelProps & RefAttributes<HTMLLabelElement>'.
  Property 'children' is missing in type '{ className: string; }' but required in type 'LabelProps'.

Removing the useTranslation import from the file immediately resolves the errors, even though the component is correctly typed and used.

Expected behavior

Importing useTranslation from next-i18next should not affect unrelated JSX typing or break prop inference in functional components.

Your Environment

• runtime version: Node.js 20.12.2
• next-i18next version: 15.4.2
• next version: 13.5.8 (Pages Router)
• TypeScript version: 5.1.6
• OS: macOS 13.6.6
• VSCode: 1.100.3 (Universal)
• Module resolution: "module": "esnext", "esModuleInterop": true, "moduleResolution": "node"
• Package manager: npm 10.5.0

Additional Info

• The components (TabsList, Label, etc.) are typed properly using React.ComponentPropsWithoutRef or library-provided types
• Restarting TS server, reloading VSCode do not resolve the issue
• This appears to be a module resolution or type side-effect issue that breaks DX significantly

[adrai]

Can you reproduce it with the simple example in this repository?

examples/simple

[dytra]

Can you reproduce it with the simple example in this repository?

examples/simple

ok I'll try making new project without exposing api keys

[stale]

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.