PropTypes defined in an external file

[elicwhite]

We have some prop types that are shared across many components and defined in their own module.

I want to be able to specify a component like this:

'use strict';

var React = require('react');
var externalPropTypes = require('./my_module');

var CommitView = React.createClass({
  propTypes: externalPropTypes.mySharedPropTypes,

  render: function() {
    return (
      <div>
        {this.props.myExternallyDefinedProp}
      </div>
    );
  }
});

module.exports = CommitView;

However it complains about this.props.myExternallyDefinedProp.

I understand that there is no way for eslint to be helpful and successfully lint this file and I'm fine with that. I just don't think it should be complaining here.

It does not complain (as it shouldn't) if the keys are defined and the values are pulled in externally:

'use strict';

var React = require('react');
var externalPropTypes = require('./my_module');

var CommitView = React.createClass({
  propTypes: React.PropTypes.shape({
    foo: externalPropTypes.sharedFooDefinition
  }),

  render: function() {
    return (
      <div>
        {this.props.foo.bar}
      </div>
    );
  }
});

module.exports = CommitView;

I think the rule should have the same non behavior when the whole value is pulled from an external file it doesn't know about.

[yannickcr]

It does not complain in this case:

var externalPropTypes = require('./my_module');

var Hello = React.createClass({
  propTypes: externalPropTypes,
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

So it should be a bug when accessing something like externalPropTypes.mySharedPropTypes instead of externalPropTypes directly.