react-i18next: Type 'TFunctionResult' is not assignable to type 'ReactNode' on React 18

🐛 Bug Report

After updating to React 18, following code gives a typescript error:

<title>{t("common:title")}</title>
       ^^^^^^^^^^^^^^^^^^^
TS2322: Type 'TFunctionResult' is not assignable to type 'ReactNode'. 
  Type 'object' is not assignable to type 'ReactNode'.

To Reproduce

https://codesandbox.io/s/react-i18next-forked-ogdrcw?file=/src/app.tsx

Expected behavior

No error

Your Environment

  "dependencies": {
    "i18next": "21.6.14",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-i18next": "11.16.2",
    "react-scripts": "5.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "typescript": "4.6.2"
  },

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 16
Comments: 20 (6 by maintainers)

Most upvoted comments

v11.16.4 fixes this

adrai on Apr 10, 2022

I have the same issue and want to add that import {t} from 'i18next'; works for me too. The type error disappears.

So it looks like the hook is still incorrectly typed for React 18.

Edit:

So using the import does work for props. But for JSX children. It will still thrown a TS error.

I normally pass a string to filterValue, but for example purposes, I changed it to React.ReactNode.

horne3754sg on Jul 20, 2022

@pedrodurek can you confirm?

adrai on Jul 20, 2022