Error in type definitions for react-intl library
See original GitHub issueAfter upgrading to the latest type definition for react-intl library (react-intl_v2.x.x.js
) in our project we started getting errors when using components wrapped with injectIntl
HOC. Example error message states:
Error: src/components/header/Header.jsx:42
v-------------
42: <NavigationBar
43: redirectToRoute={this.redirectToRoute}
44: {...this.state}
45: />
-^ props of React element `NavigationBar`. This type is incompatible with
163: IntlInjectedComponentClass<$Diff<OriginalProps, InjectIntlProvidedProps>>;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ empty. See lib: flow-typed/npm/react-intl_v2.x.x.js:163
From what I’ve managed to investigate it looks like$Diff
produces an empty type in following definition:
declare function injectIntl<OriginalProps: InjectIntlProvidedProps>
(
component: React$ComponentType<OriginalProps>,
options?: InjectIntlOtions,
):
IntlInjectedComponentClass<$Diff<OriginalProps, InjectIntlProvidedProps>>;
``` - it seems that the type of `OriginalProps` is incorrect - it's the same as the second parameter to `$Diff` and I think it should be changed to the type of original properties of component passed to this function.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:15
- Comments:6 (5 by maintainers)
Top Results From Across the Web
Error: [React Intl] Could not find required `intl` object - Stack ...
However, when I try to use react-intl, via FormattedMessage , I get the error: Error: [React Intl] Could not find required `intl` object....
Read more >react-intl - npm
Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, ...
Read more >How to translate your React app with react-intl / FormatJS
Tutorial with a complete example on react translations. Covers: react-intl, FormattedMessage, IntlProvider and babel-plugin-react-intl.
Read more >A React I18n Tutorial with FormatJS | Phrase
FormatJS, formerly react-intl, is a library that has been repackaged to offer ... The header component is defined as a div with some...
Read more >Extending react-intl with your own markup - Keypup
Learn how to setup and use react-intl to internationalize (i18n) your app. ... of flexibility in terms of making your translations dynamic, ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
That PR is merged. Not sure if this can be closed now, or if other aspects of this issue remain unfixed?So I think this issue is partially fixed now, but the 2nd point in @TomiS’s comment is still a problem, i.e. that
injectIntl
can’t be used with stateless functional components without causing type errors (if I’ve understood correctly).Thanks, @TomiS! Since it is currently impacting our team, we thought about opening a PR with your suggestion.