`prop-types` fails with destructuring

The prop-types rule fails when presented with destructuring:

package.json

{
  "dependencies": {
    "eslint": "^4.6.1",
    "eslint-plugin-react": "^7.3.0",
    "proptypes": "^1.1.0",
    "react": "^15.6.1"
  }
}

.eslintrc

{
  "env": {
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "sourceType": "module"
  },
  "plugins": ["eslint-plugin-react"],
  "rules": {
    "react/prop-types": 2
  }
}

Examples.jsx

import React from 'react';
import PropTypes from 'proptypes';

// FAIL: Should error that `bar` is missing in propTypes
class DestructuredDeepMissing extends React.PureComponent {
  render () {
    const {
      foo: {
        bar,
      },
    } = this.props;

    const it = bar;
  }
}
DestructuredDeepMissing.propTypes = {
  foo: PropTypes.shape({}).isRequired,
};

// Interestingly, non-deep destructuring works just fine
// PASS: Should error
class DestructuredMissing extends React.PureComponent {
  render () {
    const {
      foo,
    } = this.props;

    const it = foo;
  }
}
DestructuredMissing.propTypes = {};

Related: #296 Possibly related: #1346

Also possibly related is that no-unused-prop-types (without using Flow) fails on destructuring as well, which is behavior I was able to replicate (though there seem to be a plethora of tickets related to this, especially in the Flow context).

[sstern6]

@ljharb looked into this tonight locally with latest master, it actually looks like this has been fixed in a commit between last release and today. The code above is erroring correctly. I believe this should be fixed when you publish a new version. Can you confirm?

https://github.com/yannickcr/eslint-plugin-react/issues/1958#issuecomment-421091965

Thanks

[jseminck]

We have this test case:

      code: [
        'class Hello extends React.Component {',
        '  render() {',
        '    this.props.a.b',
        '    return <div>Hello</div>;',
        '  }',
        '}',
        'Hello.propTypes = {',
        '  a: PropTypes.shape({',
        '  })',
        '};'
      ].join('\n'),
      errors: [{
        message: '\'a.b\' is missing in props validation'
      }]

Judging from that, it seems some basic shapes support exists and the example should actually be supported.

Indeed when I try the following snippet I actually get an error. But the destructuring doesn’t work with the shapes…

class DestructuredDeepMissing extends React.PureComponent {
  render () {
    this.props.foo.bar;
  }
}
DestructuredDeepMissing.propTypes = {
  foo: PropTypes.shape({}).isRequired,
};