Objects are not valid as a react child (In Internet explorer 11 for React 15.4.1)

Question

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.

Answer 1

A problem since React 15.4 with IE11

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 $$typeof value

which should be typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103.

Solution

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
]