React: checker is not a function

Question

I\'m getting this weird warning message in the console for my React app.

Warning: Failed propType: checker is not a function Check the render method of <

Answer 1

The real explanation behind this issue is that react expects a PropType which is technically a function, aka checker. Examples for checker functions are:

PropTypes.array
PropTypes.shape({...})
PropTypes.bool

You got the idea... So what happens here is whenever you pass in something which isn't a checker, for example an undefined, react won't know what to do with this and so will complain:

checker is not a function

In my case, the cause was misspelling of the checker functions:

PropTypes.shape({
    cats: PropTypes.Array // this is undefined
})

The correct version should be:

PropTypes.shape({
    cats: PropTypes.array // lowercase is correct!
})

Answer 2

Reactv16

In my version of this error I had an array of objects:

data: PropTypes.shape([{
  id: PropTypes.number,
  ...
}])

The solution was to make an array of shapes like so:

data: PropTypes.arrayOf(
  PropTypes.shape({
    id: PropTypes.number,
    ...
  })
)

Answer 3

One more for the fun of it :) In my case I extracted regularly used models into separate files and imported them. So the proptype definition looked something like this:

 static propTypes = {
        ...
        selectedAction: shape(ACTION),
        ...
};

My error was that I wrote an additional curly in the shape:

static propTypes = {
        ...
        selectedAction: shape({ACTION}),
        ...
};

Answer 4

I was using oneOfType with array of strings as an argument when in fact I intended to use oneOf.

Something like that:

// Wrong!
PropTypes.oneOfType(['s', 'm'])

// Right!
PropTypes.oneOf(['s', 'm'])

Answer 5

Change

React.PropTypes.oneOfType(React.PropTypes.number, React.PropTypes.object)

to

React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.object])

(the argument should be an array)

Answer 6

In my case, I was validating props wrong. I forgot to wrap the profile object into PropTypes shape method.

Mistake

Component.propTypes = {
  viewProfile: PropTypes.shape({
    profile: {     // it is a normal object without a PropTypes shape method
      firstName: PropTypes.string,
      lastName: PropTypes.string,
      profileImage: PropTypes.string,
    },
  }).isRequired,
};

Solution

Component.propTypes = {
  viewProfile: PropTypes.shape({
    profile: PropTypes.shape({
      firstName: PropTypes.string,
      lastName: PropTypes.string,
      profileImage: PropTypes.string,
    }),
  }).isRequired,
};