New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Type error: Type 'TFunctionResult' is not assignable to type 'ReactNode'. #1795
Comments
The following solution worked for me:
Add the following to
|
This is a workaround fix, will an update be available soon ? EDIT : And this is not working anyway |
I have the same issue
I am having the same issue by using the latest package react-i18next v11.16.8 |
place "as string " to it . eg {t."dashboard.title,"dashboad") as string} |
Fix by update rn i18next version: Here |
Still broken in latest release (11.16.9): |
I also had the same error when applying TypeScript in i18n.
So I modified it as follows.
or
|
This one is working for me.
|
I'm getting this error if it is only used like this:
No problems with this:
|
Hello, I still have this bug on my side too. package.json: peerDep: { devDependencies: { issue example: {t('cart.step.regular')} with const { t } = useTranslation(); Any other solutions than the one proposed before? |
The other solution is to update all packages to the last version and remove the devDependencies entry, for me the following versions work
update all eslint and it's plugins
to check the package that needs to be updated run |
It worked for me. Thanks |
you can do something like that too: export type i18translateType = {
t: (key: string | TemplateStringsArray | (string | TemplateStringsArray)[], options?: string | TOptions<StringMap> | undefined) => string
}
const component = (props: ...) => {
const { t }: i18translateType = useTranslation();
...
return <div>
...
<p>{t("text")}</p>
...
<button>{t("dashboard")}</button>
</div>
} |
updating typescript to ^4.8.3 helped me |
If I am using withTranslation() HOC, fix in newest version is not available. Same error: (property) placeholder?: ReactNode |
I don't quite understand what this mess is all about. Could the author provide an explanation? Here is a mini-demo of the problem: TypeScript Sandbox import { TFunction as TFunctionNext } from 'next-i18next'
import { TFunction as TFunctionReact } from 'react-i18next'
type Foo = {
title: React.ReactNode
}
function barNext(foo: Foo, t: TFunctionNext) {
foo.title = t('Prodict title')
// ^^^^^^^^^
// ERROR:
// Type 'TFunctionResult' is not assignable to type 'ReactNode'.
// Type 'object' is not assignable to type 'ReactNode'.(2322)
}
function barReact(foo: Foo, t: TFunctionReact) {
foo.title = t('Prodict title')
} Conclusions (for TS
Can it be just fixed? Meanwhile, in such circumstances I would just change all |
@HT-Moh I see this one is closed. Well, should I file a new report? |
I downgraded i18n packages in previous commit (3604038), but these versions have defects in Typescipt typings: i18next/next-i18next#1795 Instead of the default hook, let's use a wrapper with enforced correct types everywhere.
I was just migrating the app to React 18 and latest TypeScript and faced the same issue. "dependencies" : {
"i18next": "^22.0.1",
"i18next-browser-languagedetector": "^6.1.8",
"i18next-http-backend": "^1.4.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^12.0.0",
},
"devDependencies": {
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^5.40.1",
"@typescript-eslint/parser": "^5.40.1",
"eslint": "^8.25.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.31.10",
"eslint-plugin-react-hooks": "^4.6.0",
"typescript": "^4.8.4",
} const { t } = useTranslation('footer');
<div>
<Link to="/terms-conditions">{t('links.terms-conditions')}</Link>
<Link to="/privacy-policy">{t('links.privacy-policy')}</Link>
</div> This
However, I can see relevant type definitions that should allow this. Similar error is noticed with general JSX tags: const { t } = useTranslation(['login', 'errors']);
<LoginHeader>
<h1 className={style.login__title}>{t('login:signin.title')}</h1>
<p className={style.login__paragraph}>{t('login:signin.subtitle')}</p>
</LoginHeader>
I've already tried to remove |
I'm running into the same issue with the versions mentioned above, have you found any solutions yet ? Oh, I found a solutions for it, just downgrade react-i18next to version 11.18.6 and it'll solve the issue. Seems like the issue is with version 12 |
@fitimbyttyqi thanks, that helped indeed. Version |
Would be great if this could be looked into so that version 12 could be used without this error |
working with |
This works with react-i18next ^12.0.0 |
It works for me. Thank you. I did update to version 12.0.0 and it generated the error. Was it necessary a downgrade version. |
Yes until there is a standard fix from the team. |
This PR will fix that, there is only one small downside that I'll describe there. |
can you try with i18next v22.0.3? |
Working with i18next v22.0.3 and react-i18next v12.0.0. Thank you! |
the following versions work for me
|
@gHashTag I have same versions, it doesn't work |
and with i18next v22.0.5? |
@adrai Exactly the same error after updating to 22.0.5 |
@adrai I am really sorry, apparently I've had it cached. 22.0.5 works! Thanks |
@adrai this issues should be re-open. it still is a problem with:
Leads to TS error : When can you provide a fix that is working as expected? |
@EnvyIT you have a different issue: https://www.i18next.com/overview/typescript#argument-of-type-defaulttfuncreturn-is-not-assignable-to-parameter-of-type-xyz |
Well , you are right @adrai thanks for your fast response. Was this introduced in a specific version? I am curious because in |
Yes, in the last major v22 |
my
inside app:
I don't get where I need to put |
module.exports = {
i18n: {
locales: ['en'],
defaultLocale: 'en',
},
returnNull: false,
}; |
still the same maybe smth wrong inside
|
@kirillleogky did you also set returnNull in the i18next.d.ts file? // i18next.d.ts
import 'i18next';
declare module 'i18next' {
interface CustomTypeOptions {
returnNull: false;
...
}
} If so, please create a minimal reproducible example and open a new issue. |
package.json:
Still not working. |
Oh, thank you so much! Among the waterfall of comments I did not see the solution. |
Still didn't get it running. The solution did not work. Any updates? |
It may not necessarily be a bug, but somehow it ends up causing a problem. Ideally, the function should return a string with a fallback value. const { t: translation, i18n } = useTranslation();
const t = (s: string) => translation<string>(s); I went with this approach so I don't have to make changes throughout the entire file. By the way, I'm migrating the code to ts, and this issue hasn't come up before. |
A potential solution could be:
or
|
I've used the following patch, and it seems to be working fine: diff --git a/node_modules/i18next/index.d.ts b/node_modules/i18next/index.d.ts
index e7b769d..045e4e1 100644
--- a/node_modules/i18next/index.d.ts
+++ b/node_modules/i18next/index.d.ts
@@ -690,6 +690,13 @@ export type TFunctionResult =
export type TFunctionKeys = string | TemplateStringsArray;
export interface TFunction {
// basic usage
+ <
+ TKeys extends TFunctionKeys = string,
+ TInterpolationMap extends object = StringMap,
+ >(
+ key: TKeys | TKeys[],
+ options?: TOptions<TInterpolationMap> | string,
+ ): string;
<
TResult extends TFunctionResult = string,
TKeys extends TFunctionKeys = string, I've just added an overload that returns a simple |
Describe the bug
You must provide a clear and concise description of what the bug is.
Occurs in next-i18next version
11.0.0
Steps to reproduce
update to react 18
Expected behaviour
You must provide a clear and concise description of what you expected to happen.
Screenshots
Additional context
This seems to be due to the following two issues
DefinitelyTyped/DefinitelyTyped#46691
DefinitelyTyped/DefinitelyTyped#56210
Solution
pumping react-i18next to the last version which contain the commit
The text was updated successfully, but these errors were encountered: