Why am I getting these React PropType errors when I have specified what they are erroring about?

Question

I have an edit form component that is wired up with Apollo Client and Redux-Form, and I also have prop-types installed.

I am remembering some reading I have done over time that 3rd party libraries can sometimes throw these kind of messages if they are missing proptypes, or if some parent component of mine isn't using prop-types correctly.

I am having difficulty reasoning about it though because I don't know where to look or why.

Here is a screenshot of the errors, one from Apollo, and one from Redux-Form:

But,

I have prop types declared on this view:

PersonEdit.propTypes = {
  ... ✂
  client: PropTypes.shape(PropTypes.any),
  initialValues: PropTypes.shape(PropTypes.object),
}

PersonEdit.defaultProps = {
  ... ✂
  client: undefined,
  initialValues: undefined,
}

I also tried with isRequired included on them:

PersonEdit.propTypes = {
  ... ✂
  client: PropTypes.shape(PropTypes.any).isRequired,
  initialValues: PropTypes.shape(PropTypes.object).isRequired,
}

Can anyone help me understand the nature of these prop-type related errors?

I feel very strongly that I read about this before, and that it might involve some "parent" logic or something getting called before the view, but I am unclear how to figure it out.

I dont understand why it says initialValues.isRequired or client.isRequired when my code doesn't specify them as required.

Oh, and here is my export for this edit form, because I feel like there is a chance it is related:

export default compose(
  connect(mapStateToProps, {
    onServerError,
    getPerson,
    onBackPress,
  }),
  // graphql(PERSON_EDIT_MUTATION),
  reduxForm({
    validate,
    form: 'PersonEdit',
    enableReinitialize: true,
  }),
)(withApollo(PersonEdit))

I just tried remixing the code and chopping various things out around the time componentWillMount and componentDidMount run, and I commented everything out to trigger the NotFoundPage component instead of the edit form, and it is still generating the same errors.

The errors go away if I comment out the propTypes and defaultProps declarations, so it is somehow related to them.

Answer 1

Your problem is surely related with this code

PersonEdit.defaultProps = {
  ... ✂
  client: undefined,
  initialValues: undefined,
}

You are setting props to be objects and you are settings their value to undefined. Why do you do that?

Just set it to something like (or whatever that is not undefined)

PersonEdit.defaultProps = {
  ... ✂
  client: null,
  initialValues: null,
}

Also, why are you setting type checking like that? Why do you use any and object inside shape? You could just write it as this

PersonEdit.propTypes = {
  ... ✂
  client: PropTypes.any.isRequired,
  initialValues: PropTypes.object.isRequired,
}

Hope that helps!