React app not rendering in IE11 and below

[FarhadG]

Do you want to request a feature or report a bug?
BUG

What is the current behavior?
App doesn't render in IE11 and below.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).

• Build React app with Webpack
• Launch IE11 or below (not an emulator)
• You will see a blank screen or half-compiled React app with the following error:
  

What is the expected behavior?

• To render as it does in Chrome, Firefox, etc.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
We've temporarily shrink-wrapped our dependencies so that we can continue to serve our app. We're starting to believe that it's coming from a dependency that react, apollo or webpack may be relying on...

Shrink-wrapped versions of our dependencies (left is the new one that's broken and the right one is the old one that continues to work across all browsers) https://www.diffchecker.com/SyaJUcsk

[aweary]

@FarhadG thanks for the report. Can you try to reproduce the error in dev? A diff of dependencies isn't too useful alone, unfortunately.We'd need a reproducible test case or a stack trace to try and narrow down the root cause here.

[FarhadG]

Thanks for the quick response, @aweary .

Did you want me to compile the app in development mode and test or start the webpack server in dev mode (i.e. hot reloading, etc.)

[gaearon]

You will see a blank screen or half-compiled React app with the following error:

Have you tried following the link in that error? It should include the information explaining why the error happened.

[FarhadG]

I did, @gaearon. It didn't make sense why it would work in Chrome and Firefox but not in IE11 and below. Thoughts?

[gaearon]

Maybe you enabled babel-plugin-react-inline-elements. It requires a Symbol polyfill and won't work without it. See #5138.

[FarhadG]

Going to give this a try, @gaearon, however, it's baffling that it's been working all along until a few days ago.

[aweary]

Did you want me to compile the app in development mode and test or start the webpack server in dev mode (i.e. hot reloading, etc.)

Either way, as long as React is not being built for production. This should at least give us a better idea of where the issue is occurring.

[FarhadG]

Looked through our codebase and we were not explicitly using babel-plugin-react-inline-elements nor were any of our configurations. Thanks for the suggestion, @gaearon.

[FarhadG]

So, we served our app in development and it appears to work, consistently, yet when we bundle in production, we see the same result. Let me know what information would be useful for us to help track this issue down, @aweary.

[gaearon]

@FarhadG Are you absolutely confident? Like maybe you use a preset that "optimizes" React which might include another preset, which might ultimately include that plugin.

[nhunzaker]

@FarhadG I hit this on my current project and had to include the Symbol polyfill. I do this by adding a polyfills.js to my entry point that looks like:

/**
 * Place any polyfills here. This project uses core-js:
 * https://github.com/zloirock/core-js
 *
 * ES6:
 * https://github.com/zloirock/core-js/tree/master/es6
 */

//...

// We need Symbol support for some React optimizations
require('core-js/modules/es6.symbol')

Edit: We use the babel-preset-react-optimize package

[FarhadG]

That was our original idea after your suggestion, @gaearon. I followed these particular presets:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["react-hot-loader/babel"]
}

... and didn't see them requiring anything to do with the optimization plugins.

Just gave it a try, for trying's sake, @nhunzaker, and the issue persists.

[tanepiper]

I'm having the same issue. However I have two apps - one running 15.1.0 and one running 15.4.0, on a more recent update path.

https://www.votesforschools.com/ (15.1.0)
https://admin.votesforschools.com/ (15.4.0)

In each case in IE11 the exception is this:

https://facebook.github.io/react/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%2C%20_owner%7D&args[]=

Which outputs:

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner}).

However this is only happening in deployed production. If I do a production build locally and serve it from Python SimpleHTTPServer this exception does not trigger.

I just want to report this, but as of tomorrow I'm rolling off this project as I'm starting a new job in the new year so I won't have access to the source code after this.

These are the only babel plugins being used (this is from our www config, admin is again slightly different)

"babel-core": "^6.10.4",
"babel-eslint": "^6.1.0",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-class-properties": "^6.10.2",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.9.0",
"babel-runtime": "^6.9.2",

Update 1: In IE now getting an exception box on our dev environment (but not on production itself). Full text is:

Line: 213
Error: 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 `CoreLayout`.

On Production it's just the above one, without the mention of CoreLayout (which is just the app wrapper that called ReactDOM.render)

Update 2:

I've done the above with the polyfill. I have checked in the console and Symbol is available however I am still getting this error

Update 3:

Checked the node_modules folder, babel-plugin-react-inline-elements is not included anywhere so for me not linked to that

Update 4:

One project was causing a bit of a red herring.

The project that is currently running on React 15.1.0 has had no dependency updates since October in the package.json file, however packages are marked with the caret ^ symbol - so when running on the CI that means it was updating to the major version anyway.

I've changed this to tilde version locking (i.e. ~ on versions) and it resolved the issue for that project.

I've rolled back the second project to 15.3.2 and it's also working fine now.