IE 11 support

[oniseijin]

Firefox works, but nothing gets rendered on IE 11 Windows7, on current development branch (as of raising this today)

[n8sabes]

Confirmed. Does not render in IE, including latest Surface devices running Windows 10.

[mrgswift]

Not sure why it isn't loading your projects in IE 11. I am running a rather large app using react-static-boilerplate, and IE 11 in Windows 7 appears to work fine for me. Are you having trouble in your dev deployment ,production deployment, or both?

[daveobriencouk]

@oniseijin, @n8sabes - Is there an error being logged to the console? I'm experiencing the issue with IE 11 - it's logging out an object Error and a Objects are not valid as a React child. It may be something to do with Babel.

[daveobriencouk]

This looks related to this https://github.com/facebook/react/issues/8379

[superbull]

If you Run

yarn build
or
yarn build:debug

And server the build result with what ever web server, works on IE11

But the strange thing is if you run in dev server with:

yarn start

It is not working in IE11.

I checked the bundled main.js file from dev server, the bable-polyfill code is below react code.

Anyone knows why?

[frenzzy]

Just move babel-polyfill to webpack.config like here, everything must work in IE9+ if polyfills will be executed before any other code.

[Ehernandez0921]

Hey guys, I was having the same issue with Object.assign. I re cloned and started application from scratch. It works perfect with Chrome,Firefox,Edge,Edge(emulating 11) but in IE 11 I got an error. I got it working by moving require.resolve('./polyfills') to before require('react-dev-utils/webpackHotDevClient') in webpack.config.dev.js. After I did that it didn't work so inside the polyfill.js i used es6-object.assign instead of object-assign.

That solved the issue. the only problem is of course that when ever i run an add it reevaluates node module and the files get overwritten.Is there a way to extend the webpack config without touching the node modules.

Edit 9-1-17. Also had the same issue with string.startswith got around it by installing 'string.prototype.startswith' and putting it in the polyfills.js

//------------------------------------------------------
//webpack.config.dev.js
module.exports = {
  // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
  // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
  devtool: 'cheap-module-source-map',
  // These are the "entry points" to our application.
  // This means they will be the "root" imports that are included in JS bundle.
  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
  entry: [
    // Include an alternative client for WebpackDevServer. A client's job is to
    // connect to WebpackDevServer by a socket and get notified about changes.
    // When you save a file, the client will either apply hot updates (in case
    // of CSS changes), or refresh the page (in case of JS changes). When you
    // make a syntax error, this client will display a syntax error overlay.
    // Note: instead of the default WebpackDevServer client, we use a custom one
    // to bring better experience for Create React App users. You can replace
    // the line below with these two lines if you prefer the stock client:
    // require.resolve('webpack-dev-server/client') + '?/',
    // require.resolve('webpack/hot/dev-server'),
    require.resolve('./polyfills'),
    require.resolve('react-dev-utils/webpackHotDevClient'),
    // We ship a few polyfills by default:
    // Finally, this is your app's code:
    paths.appIndexJs

//polyfill.js
require('whatwg-fetch');
//-------------------------------------------------------------------
// Object.assign() is commonly used with React.
// It will use the native implementation if it's present and isn't buggy.
Object.assign = require('es6-object-assign').assign;
require('string.prototype.startswith');