Flow: Missing props error in React component points to definition instead of instance

[0x80]

Considering the following React component:

/* @flow */
import React from 'react'

type Props = {
  msg: string
};

const A = (props: Props) => {
  return (
    <div>
      A says: {props.msg}
    </div>
  )
}

export default A

If you instantiate the component without props, like <A/>, you get an error in the component source file underlining (props: Props) and stating: [flow] propertymsg(Property not found in props of React elementASee also: React elementA).

I find this confusing because the error doesn't point to the instance of A but the source file. For a while I thought I was defining the Props type wrongly. The file using the instance of <A/> wrongly doesn't show any error.

[mouton-rebelle]

Just lost 1h on that one.
Gonna go back to PropTypes for now

[FezVrasta]

What's the solution then?

[mouton-rebelle]

I have now idea how Flow works and how difficult it is to achieve, but the errors should pop where the component is instancied, not on the component declaration

[AugustinLF]

The file underlined in your text editor is indeed the wrong one, however, if you run flow in your console, you'll get a more precise error message, which also indicates where the component is wrongly instantiated.

[koskh]

I have this problem in last Webstorm 2017.2 Errors appear on definition file.
In prev version (2017.1.4) errors are in right place (on editor page of instance file)

so I use prev version of Webstorm

[charlie-axsy]

As mentioned above, this is an IDE problem. The Flow binary is outputting a descriptive error to the console but it is being misinterpreted by the IDE.

[callmeberzerker]

Yep wasted 1 hour on this as well...

[cdomigan]

Here's the WebStorm ticket, I suggest you vote for it!
https://youtrack.jetbrains.com/issue/WEB-28062