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"
  },

Issue Analytics

State:
Created a year ago
Reactions:15
Comments:18 (6 by maintainers)

Top GitHub Comments

3reactions

adraicommented, Apr 10, 2022

v11.16.4 fixes this

1reaction

adraicommented, Jul 20, 2022

@pedrodurek can you confirm?

Top Results From Across the Web

Type 'TFunctionResult' is not assignable to type 'ReactNode ...

I was just migrating the app to React 18 and latest TypeScript and faced the same issue. "dependencies" : { "i18next": "^22.0.1", " ......

react-i18next on React Native No overload matches this call ...

In the error message, you can find the problem. Type 'TFunctionResult' is not assignable to type 'string | number | TextElement ...

type ' ' is not assignable to type 'reactnode' - You.com - You.com

To Reproduce. I wrap my react component into withTranslation() hook and then access props.i18n.t('someTranslationKey') to render the text:.

@types/react-i18next | Yarn - Package Manager

This is a stub types definition. react-i18next provides its own type definitions, so you do not need this installed. Stub TypeScript definitions entry...

TypeScript - react-i18next documentation

We recently moved all type enhancements described here to i18next , so if you are ... Argument of type 'string' is not assignable...