Eslint-plugin-react: [Stateless Components + Object props + Flow]: Proptype is defined but prop is never used

[joncursi]

Consider the following contrived example:

type PropsFlowType = {|
  ...
  primaryAction: {
    action: () => void, // here
    icon: string, // here
    title: string, // here
  },
  ...
|};

const StatelessComponent = ({ primaryAction, ... }: PropsFlowType) => (
  ...
  <SomeComponent
    action={primaryAction.action}
    icon={primaryAction.icon}
    title={primaryAction.title}
  />
  ...
);

Eslint will complain at the lines marked // here that these values are not used, even though they are in-fact used. Perhaps a compatibility issue with Flow?

[ljharb]

I'm not sure how Flow works here with nested shapes, but in PropTypes, it'd need to be PropTypes.shape({ … }), not an object literal. It's possible that this plugin doesn't work with nested object flow types?

What happens if you make primaryAction its own, separate type?

[joncursi]

Hmm. Breaking out primaryAction into it's own type results in the same error:

type PrimaryActionFlowType = {|
    action: () => void, // ESLint: primaryAction.action PropType is defined but prop is never used
    icon: string, // ESLint: primaryAction.icon PropType is defined but prop is never used
    title: string, // ESLint: primaryAction.title PropType is defined but prop is never used
|};

type PropsFlowType = {|
  ...
  primaryAction: PrimaryActionFlowType,
  ...
|};

const StatelessComponent = ({ primaryAction, ... }: PropsFlowType) => (
  ...
  <SomeComponent
    action={primaryAction.action}
    icon={primaryAction.icon}
    title={primaryAction.title}
  />
  ...
);

[joncursi]

Interestingly enough, I found that adding = {} after the props function argument takes away these errors:

...
const StatelessComponent = ({ primaryAction, ... }: PropsFlowType = {}) => (
...

I'm really not sure what this is doing, though. It seems more like a hack than a solution because now, if I actually do forget to use primaryAction.something, or any other prop for that matter, ESLint no longer warns me because it has been tricked by the = {} to believe everything is being used. Nothing will flag anymore.

[billyvg]

Is this perhaps related to #587?