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
Chart.
I do not have any checker method at all. If I remove my propTypes, the warning is gone. Any ideas?
My react component:
var Chart = React.createClass({
//...
propTypes: {
legend: React.PropTypes.bool,
max: React.PropTypes.number,
min: React.PropTypes.number,
series: React.PropTypes.arrayOf(
React.PropTypes.shape({
label: React.PropTypes.string,
values: React.PropTypes.arrayOf(
React.PropTypes.arrayOf(
React.PropTypes.oneOfType(
React.PropTypes.number,
React.PropTypes.object // Date
)
)
),
colorIndex: React.PropTypes.string
})
).isRequired,
threshold: React.PropTypes.number,
type: React.PropTypes.oneOf(['line', 'bar', 'area']),
units: React.PropTypes.string,
xAxis: React.PropTypes.arrayOf(React.PropTypes.string)
},
render: function() {
return (<svg>...</svg>);
}
//...
});
The payload I send to the Chart component is this one:
var series = [
{label: 'first', values: [[5,2], [4,3], [3,3], [2,2], [1,1]], colorIndex: "graph-1"},
{label: 'second', values: [[5,3], [4,2], [3,0], [2,0], [1,0]], colorIndex: "graph-2"}
];
In my case I got this when I used the shape function with a complex object. The solution was to go from:
outerObject: shape({
firstInnerObject: {
a: string,
b: string,
},
secondInnerObject: {
a: string,
b: number,
},
}),
To:
outerObject: shape({
firstInnerObejct: shape({
a: string,
b: string,
}),
secondInnerObject: shape({
a: string,
b: number,
}),
}),
Very trivial, I know, yet this might be the solution for someone equally inexperienced as I am. ;)
A pull request has been merged to the React repo that provides a better feedback for the developer whenever a mistake like this happens again.
Now, the validation message will look like the following:
Invalid argument supplied to oneOf, expected an instance of array.
https://github.com/facebook/react/pull/3963
This should be part of React 0.14.
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)