Menu
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 createFragment(object) from the React add-ons. Check the render method of
App.
AppContainer :
const mapDispatchToProps = (dispatch) => { return { } } } } Component:
class App extends Component { render() { return ( ); } } Above is my render function for app.js. This Code is working fine in google chrome, but when coming to Internet explorer It is not working and it is throwing the above error.
875
js error "Objects are not valid as a React child" occurs when we try to directly render an object or an array in our JSX code. To solve the error, use the map() method to render arrays or access properties on the object in your JSX code.
The "Objects are not valid as a React child" error happens when trying to render a collection of data by mistakenly returning the object when applying the map method instead of using the data from the object to create and return JSX.
By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use react-app-polyfill.
Accessing the window object in React is the same as anywhere else. It exists before any of your JavaScript runs. As a test, type about:blank into your location bar, open the console and type 'window'. It's there even with no other JavaScript on the page.
If you still have this issue, you may have a look at this react issue #8379 about React 15.4 and IE11. I had the same problem with webpack dev mode / IE11 / React 15.4, and it seems that React and ReactDom each use their version of a Symbol polyfill (this is new with 15.4):
Somehow react and react-dom no longer "agree" on the
$$typeofvaluewhich should be
typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103.
I've resolved this issue by reordering polyfill and react / react-dom to be sure that the polyfill Symbol is loaded before React and ReactDom's Symbol... Now they "agree" on $$typeof value.
Example solution for webpack:
entry: [ 'babel-polyfill', // Load this first 'react-hot-loader/patch', // This package already requires/loads react (but not react-dom). It must be loaded after babel-polyfill to ensure both react and react-dom use the same Symbol. 'react', // Include this to enforce order 'react-dom', // Include this to enforce order './index.js' // Path to your app's entry file ] In my case with React Native we dragged this mysterious bug for weeks appearing just on Android builds without an attached debugger.
The culprit was an
import 'core-js'
on our root component, it seems the polyfill was messing things up
The solution was to simply remove it as it's no longer necessary in my case
Relevant portion of package.json
"react-native": "0.44.2", "react": "16.0.0-alpha.6", If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
