Next-i18next: Cannot use props with components using translations

[martonlederer]

Describe the bug

Using custom props next to the translation function t() throws an error with typescript.

Occurs in next-i18next version

7.0.1

Steps to reproduce

Create a component with custom props

function Nav({ propName, t }) {
   ...
}
export default withTranslation('nav')(Nav)

Use it in another component:

<Nav propName="test" />

Expected behaviour

No errors on compile.

Screenshots

If applicable, add screenshots or a GIF to help explain your problem.

[Poitrin]

Yes, I had the same problem.

In https://github.com/isaachinman/next-i18next/issues/647#issuecomment-596451214, one developer switched to Hooks instead, which are also used in Next.js' react-i18next sample app.

Therefore, one way is to do it like this:

export const nextI18Next = new NextI18Next({ … });
export const useTranslation = nextI18Next.useTranslation;

… and then …

import { useTranslation } from 'config/i18next';

const MyComponent = () => {
  const { t } = useTranslation();

  …

I have no idea if this is the best solution, but it feels like it is the solution

• that needs the least code
• and that fits well into this React Hooks mentality.

[isaachinman]

This is a problem that is not specific to next-i18next, but HOCs in TypeScript in general. Using hooks avoids this issue, but otherwise you'll need to have a look at how to type HOCs in TS. Good luck!