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.

Error in type definitions for react-intl library

See original GitHub issue

After 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:open
  • Created 6 years ago
  • Reactions:15
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
callumlockecommented, Feb 12, 2018

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

3reactions
apdaroscommented, Jan 24, 2018

Thanks, @TomiS! Since it is currently impacting our team, we thought about opening a PR with your suggestion.

Read more comments on GitHub >

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

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