Lightrun
question-mark
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.

Inference issue while using withTranslation() with TypeScript 3.9

See original GitHub issue

I’m trying to upgrade a big project to TypeScript 3.9 but I encounter some typing error caused by the withTranslation HOC. It seems that props inferring from old prop types definition (for JSX files) don’t work properly.

  • i18next: 19.4.4
  • react-i18next: 11.5.0 (but I also have the issue with versions <10)
  • typescript: 3.9.3

I created a very small project to reproduce the problem. If you start it, you will see the error of the wrong assignation from the type returned by the withTranslation HOC.

Type '{ name: string; }' is not assignable to type 'IntrinsicAttributes & Pick<WithTranslation, never> & WithTranslationProps & { children?: ReactNode; }'.

Note that I don’t have this issue with version 3.8 of TypeScript or without this HOC.

Maybe I miss something, don’t hesitate for more info if needed.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:6

github_iconTop GitHub Comments

4reactions
svengaucommented, Jul 28, 2020

Hi @clementgarbay I’ve got the same issue than you. Could you share how you’ve solved it ? thx

2reactions
akinneecommented, Mar 24, 2022

@xseman I’m having that exact same problem.

Read more comments on GitHub >

github_iconTop Results From Across the Web

withTranslation (HOC) - react-i18next documentation
When to use? Use the withTranslation HOC to wrap any component (class or function) to access the translation function or i18n instance.
Read more >
front-end/node_modules/@material-ui/styles/CHANGELOG.md
A way to get location (latitude and longitude), elevation, speed and other relevant data from individual satellites from the Starlink constellation.
Read more >
React and TypeScript Cheatsheets for Developers - Morioh
In this tutorial, we will share a repository of Cheatsheets for experienced React developers getting started with TypeScript. DO NOT MISS!!!
Read more >
material-ui/core/CHANGELOG.md - UNPKG
219, - Simplify the theme overrides with TypeScript for the components in the ... 376, - [Snackbar] Fix double click issue on demos...
Read more >
TypeScript not inferring function argument type when passing ...
I think this is because of the type inference algorithm that TS uses. It seems that they don't use an unification based algorithm....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Rendering ordered/unordered lists from a translation string.

Next page

Failed to fetch error is thrown in console on languageChange but on refresh works fine.