Eslint-plugin-react: react/prop-types incompatible with flow variance syntax

[ajhyndman]

Flow introduced variance syntax in 0.34.0. This seems to have introduced a bug when component prop-types are explicitly flagged.

This code is flagged as incorrect:

import React from 'react';

type Props = {
  +value: string;
};

const Component = (props: Props) => (
  <div data-value={props.value} />
);

Versions:

"babel-core": "^6.18.2",
"babel-eslint": "^7.1.0",
"eslint": "~3.6.0",
"eslint-plugin-react": "^6.7.1",
"eslint-plugin-flowtype": "^2.25.0",

[ljharb]

Can you elaborate what +value: string means in flow?

[ajhyndman]

Oh, sure.

In Flow 0.34.0 they introduced a syntax for specifying whether a property in an object passed as a parameter is _covariant_, _contravariant_, or _invariant_. This tells you whether you are allowed to assign keys to a subtype or supertype of their declared type inside or outside of the function context. The property variance annotation can be a + or a -.

Long story short: I think it should be ignored when checking whether a prop has been validated or not!

Docs: https://flowtype.org/blog/2016/10/04/Property-Variance.html

[ljharb]

Based on my understanding of that blog post, +/covariant is read only, -/contravariant is write only, and objects are invariant by default. In your example code, I agree the warning should not appear.

A separate question is what to do about contravariant props, but since you arent supposed to ever mutate props, it seems like you'd never want a contravariant prop, and that should be an error - but that seems like a separate rule.

[ajhyndman]

I think you nailed it.