Problem with Flow typing of withI18nProps: suppressed errors

[azangru]

I have come across an unusual problem when using js-lingui's Flow types. Creating an intersection type between a regular component props object and withI18nProps type leaves Flow unable to detect errors when using this props object.

I have created a minimal reproduction case here, but briefly an example can be recreated like this:

• declare a component Props type with arbitrary fields, e.g.:

type Props = {|
  foo: string
|};

• import withI18nProps type from @lingui/react

• intersect the Props type with the withI18nProps type:

type Props = {|
  foo: string
|}  & withI18nProps;

or, alternatively, spread the withI18nProps type in the Props object type:

type Props = {|
  foo: string,
  ...withI18nProps
|};

• in the React component, try to access a property not declared in the Props type (e.g. this.props.x)

• notice that Flow is not marking this as an error

• remove withI18nProps from the intersection (or from the object where it was spread) and notice that Flow now catches the error of accessing the non-declared property.

I could not replicate the problem as a cleaner and smaller case in try Flow, but I hope the provided info will be enough to help you find the problem.

[tricoder42]

Hey @azangru, this seems to be a Flow issue which is most probably fixed. I tried similar example right now and it works.

Just curious, why do you intersect withI18nProps manually in App.js? This should all be handled by withI18n HOC here

[azangru]

Hi @tricoder42 ,

Sorry, I meant to write earlier that the real issue was that the distribution of @lingui-react installed via npm does not have Flow type definitions anymore. So when I imported type { withI18nProps } from '@lingui/react', what Flow actually imported was of type any, and that completely screwed my type definitions.

I was wondering whether you might want to consider distributing your Flow types along with the library. I am not sure what the best practices for such a distribution are — I know only that the guys at react-select (version 2), for example, actually manage to include Flow type definitions in their built library that they are distributing via npm.

[tricoder42]

@azangru I see! Thanks. I've created a new issue (#250) to fix this.

[tricoder42]

Flow types are included in npm packages since release 2.4.0

[kirillku]

@tricoder42, was adding ...withI18nProps manually to type Props before the export was removed from the package. Now I always have Property i18n is missing in Props [1]. error when using withI18n hoc. Using @lingui/react 2.7.0.