1
votes

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?

1
First, find out the exact location of the error. make your packing utils (webpack or whatever) add sourcemap - InQβ
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
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β

1 Answers

0
votes

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