react/prop-types does not validate missing propTypes for functions in version 7.11.1

[barbu-vlad]

The following patterns are considered warnings:

var Hello = createReactClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

var Hello = createReactClass({
  propTypes: {
    firstname: PropTypes.string.isRequired
  },
  render: function() {
    return <div>Hello {this.props.firstname} {this.props.lastname}</div>; // lastname type is not defined in propTypes
  }
});

function Hello({ name }) {
  return <div>Hello {name}</div>;
}

This rule is not working in the latest version (7.11.1).
Missing propTypes for functions are not marked anymore. This was working fine on 7.10.0

[ljharb]

cc @alexzherdev

[alexzherdev]

@blackbird91 do you mean propTypes for functional components? Those are covered with tests pretty well, would you mind posting the code for the component that is having issues?

[ljharb]

@alexzherdev what about createReactClass components tho?

[alexzherdev]

createReactClass is covered with 30+ test cases. Hard to imagine what could have gone wrong without a repro.

[barbu-vlad]

That's my example where props are not validated:

export class TestComponent extends Component {
    static get propTypes() {
        return {
            object: PropTypes.object,
            }
    }

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const { func } = this.props;

        func(); //does not throw missing props validation
    }

    render(){
         return <span/>;
    }     
}

[ljharb]

@blackbird91 hm, the rule might not be covering misusing a static getter in that fashion; if you make it TestComponent.propTypes = { object: PropTypes.object }, does it warn as expected?

[barbu-vlad]

It was working just fine in previous versions. Also, If I'm missing propTypes for other types of objects I get a validation message

[alexzherdev]

This exact code is reporting a missing prop as a test case.
Is this actually the exact way the prop is being used? If this is simplified, can you post the original?

const { func } = this.props;
func();

[barbu-vlad]

Capture @ version 7.11.1

Capture @ version 7.10.0

[ljharb]

@blackbird91 please provide text, not screenshots - screenshots of code aren't nearly as helpful :-/

[barbu-vlad]

I can't provide blocks of code, the small example I've posted before is very similar with the one I encounter in my project. I just wanted to show the difference between the 2 versions with these screen captures

[bbthorntz]

Also having the same issue. It seems to be related to components which spread props. A minimal example, for me, is the following:

Working (has a linting error):

class Component extends React.PureComponent {
    render() {
        this.props.doesNotExist(); // `react/no-props` linting error
        return <div />;
    }
}

Not working (has no linting error):

class Component extends React.PureComponent {
    render() {
        this.props.doesNotExist(); // No linting error
        return <div {...this.props} />;
    }
}

[alexzherdev]

@blackbird91 can you also post your render method?
@bbthorntz this code should warn in the latest version

[swrobel]

A simple case that was caught in 7.10.0 & not caught by 7.11.1

import React from 'react';

export default class TestComponent extends React.Component {
  render() {
    const { prop, ...rest } = this.props;
    return <p {...rest}>{prop}</p>;
  }
}

7.10.0 output:

  5:13  error  'prop' is missing in props validation  react/prop-types

7.11.1 output shows no errors.

[asbjornh]

I'm seeing the same (or same-ish) issue with 7.11.1. The following components have no linting messages:

const Component = ({ prop }) => <div {...prop} />;

class Component extends React.Component {
  render() {
    return <div {...this.props.prop} />;
  }
}

These ones, however, do generate warnings about missing propTypes validation:

const Component = ({ prop }) => <div prop={prop} />;

class Component extends React.Component {
  render() {
    return <div prop={this.props.prop} />;
  }
}

Might be related to destructuring and/or spreading?