Add validation for arrayOf and objectOf in ReactPropTypes

[chicoxyzzy]

  static propTypes = {
    instrument: PropTypes.object.isRequired,
    data: PropTypes.arrayOf({
      timestamp: PropTypes.object.isRequired,
      value: PropTypes.number.isRequired,
    }).isRequired,
    height: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired,
  };

Notice data property. it should look like

    data: PropTypes.arrayOf(PropTypes.shape({
      timestamp: PropTypes.object.isRequired,
      value: PropTypes.number.isRequired,
    })).isRequired,

instead.

This is one of common mistakes. But error message is very cryptic:
Warning: Failed propType: typeChecker is not a function Check the render method of 'ChartPanel'.

So I wrote some tests and pretty error messages.

now error looks like this
Warning: Failed propType: Invalid prop 'data' supplied to 'ChartContainer', expected valid PropType. Check the render method of 'ChartPanel'.

This is kind of same as #3963 but for arrayOf and objectOf proptypes

[zpao]

This message isn't awesome. You're actually trying to say that the component author wrote a bad propType spec, but the way this error will show sounds like the user provided an invalid prop value. Can we tune it so that's more clear?

[chicoxyzzy]

Is it more clear now?

[zpao]

Thanks for doing this, I think it's a great idea. I sort of wish I had pushed for making #3963 actually throw an error (since it would throw at require time, not component creation time). We have less contextual information we can provide but the error would actually be thrown earlier, preventing bad proptype definitions from getting committed… maybe we can do that in another pass.

[facebook-github-bot]

@chicoxyzzy updated the pull request.

[zpao]

Alright, let's do it. Now that I'm thinking about proptypes again, I might have some followup ideas to try but this puts us in a better spot.

[slorber]

hey @zpao I also got a case where I had this error. I'm not exactly sure where it came from nor where I fixed it but a better error message would have helped :)

Actually we register all of our Api payloads as proptypes. I think at some point the declaration order of proptypes lead to something like PT.arrayOf(undefined), or maybe PT.shape({attribute: undefined}

Maybe it's something else because I can't get this "typeChecker" error back.

[chicoxyzzy]

@slorber feel free to ping me if you'll meet your issue again