1

The whole error:

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead or wrap the object using createF...<omitted>...`.

I can't find the exact location of this error, it just makes an error in the react-dom, so how can I debug and find out this error?

Pang
  • 9,564
  • 146
  • 81
  • 122
cc g
  • 31
  • 1
  • 6
  • First, find out the exact location of the error. make your packing utils (webpack or whatever) add sourcemap – InQβ Sep 12 '17 at 01:42
  • I'm already using sourcemap, but the error still show up in react-dom, i think it's the cause of babel-polyfill – cc g Sep 12 '17 at 03:41
  • 1
    See the call stack in console error and click the highest of your code. It is common to have error in react-dom if you have passed bad params to it, so you should find out what you have passed to react-dom, then place breakpoint on line. – InQβ Sep 13 '17 at 05:19

1 Answers1

0

You must be using an object as a child for a component in your render method. Your component's child must be either a component, string or array.

Ex.

render() {
      return(
        <YourComponent>
          {YourComponentChild} // Check here, this must be either a string, an array or another component
        </YourComponent>
      );
    }

You can also follow this SO thread Invariant Violation: Objects are not valid as a React child

vs1682
  • 545
  • 2
  • 12