Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Type 'TFunctionResult' is not assignable to type 'string'. #515

See original GitHub issue

After upgrading react and react-dom from 17.0.2 to 18.0.0 the issue `Type ‘TFunctionResult’ is not assignable to type ‘string’ error appears - apparently this was an issue before https://github.com/isaachinman/next-i18next/issues/515

using next "next": "12.1.4" and "next-i18next": "^11.0.0",

  "compilerOptions": {
    "target": "es6",
    "esModuleInterop": true,
    "importHelpers": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "es5",
      "es6"
    ],

when I downgrade to “react”: “^17.0.2”, everything works as before.

Issue Analytics

State:
Created a year ago
Reactions:11
Comments:12 (5 by maintainers)

Top GitHub Comments

9reactions

heikomatcommented, Apr 8, 2022

One quick and very dirty workaround is to just overwrite the return-type of that i18next-function:

import * as i18next from 'i18next';

// Workaround for https://github.com/isaachinman/next-i18next/issues/1781
declare module 'i18next' {
  interface TFunction {
    <
      TKeys extends i18next.TFunctionKeys = string,
      TInterpolationMap extends object = i18next.StringMap
    >(
      key: TKeys,
      options?: i18next.TOptions<TInterpolationMap> | string,
    ): string;
  }
}

The culprit is here: https://github.com/i18next/i18next/blob/9ca694db52fe5b6f10da5debf3e106e6f615b907/index.d.ts#L685-L707

the result type of the function extends TFunctionResult, which is defined as

type TFunctionResult = string | object | Array<string | object> | undefined | null;

So to typescript the result of that function can be pretty much anything.

What i haven’t found out yet is: Why was this not an issue before with react 17?

5reactions

adraicommented, Apr 10, 2022

react-i18next v11.16.4 fixes this

Top Results From Across the Web

Type 'TFunctionResult' is not assignable to type 'string'. #515

Why is TFunctionResult is not assignable to 'string'? I have to pass it as {t("my-translation") as string} as a workaround.

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 ...

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...

Real-Time Collision Detection

Real-time Collision Detectionis a comprehensive reference on this topic, covering it with both breadth and depth. Not only are the fundamental algorithms ...

react中使用react-i18next+ts的坑 - CSDN博客

先上报错，这是我在组件页面定义变量的时候碰到的，如下TS2322: Type 'TFunctionResult' is not assignable to type 'ReactNode'. Type 'object' is ...