Uncaught Invariant Violation

[123ndy]

This works:

<MediaQuery maxWidth={641}>{parent.content.desktopText.split('\n').map(function(item, index) {
   return (
      <span key={`d83s72h6fd${index}`}>{item}<br/></span>
   )
})}
</MediaQuery>

This creates error:

<MediaQuery minWidth={641}>{parent.content.desktopText.split('\n').map(function(item, index) {
   return (
      <span key={`d83s72h6fd${index}`}>{item}<br/></span>
   )
})}
</MediaQuery>

The only difference is that I use maxWidth in the first and minWidth in the latter.

Any idea why this happens?

Error:
Uncaught Invariant Violation: MediaQuery.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

[yocontra]

@123ndy React version?

[123ndy]

React version 15.2.0

[rhavill]

I was getting the same error, but in my case the error was triggered by a MediaQuery component with a maxWidth. I do not know what is causing this, but screen size seems to be a factor. (I was only seeing the error when using a small screen.) In my case, wrapping the contents of MediaQuery with a div tag made the error go away. This might be an acceptable workaround for most people.

I was getting the error when the render function of the MediaQuery component was returning an empty array. The final "else" in the render function returns this.props.children, which was an empty array in this case.

A possible bug fix could be to replace this:

var wrapChildren = React.Children.count(this.props.children) > 1 ||
      typeof this.props.children === 'string' ||
      this.props.children === undefined;

with this:

var wrapChildren = React.Children.count(this.props.children) !== 1 ||
      typeof this.props.children === 'string' ||
      this.props.children === undefined;

(replace "> 1" with "!== 1").

I do not know if that fixes a bug, but it makes the error go away in my case.

[yocontra]

@rhavill I think a more permanent fix is to return null when 0 children exist instead of an empty array. Want to send a PR?

[yocontra]

Closed by #62