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.

Solution 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
]

Solution 2

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",

Solution 3

My issue was babel-polyfill needed to be above my react-hot-loader includes. React and react-dom needed to preceed babel-polyfill in the webpack entry for reasons described by this comment:

https://github.com/facebook/react/issues/8379#issuecomment-263962787.

Looked like this:

dev:

entry: [
  'babel-polyfill',
  'react-hot-loader/patch',
  `webpack-dev-server/client?${localhost}:${PORT}`,
  'webpack/hot/only-dev-server',
  PATHS.app
]

production:

entry: [
  'babel-polyfill',
  'react',
  'react-dom',
  PATHS.app
]

Previously...

dev:

entry: [
  'react-hot-loader/patch',
  `webpack-dev-server/client?${localhost}:${PORT}`,
  'webpack/hot/only-dev-server',
  'babel-polyfill',
  PATHS.app
]

production:

entry: [
  'babel-polyfill',
  PATHS.app
]