How do I support IE 11 with Create React App 3.0?

Question

With the release of Create React App 3.0 and the addition of browserlist, adding support for IE 11 is trivial, but the steps can be hard to find if you don't know where to look. The documentation lists "Supported Browsers" and shows the default browserslist configuration ( https://facebook.github.io/create-react-app/docs/supported-browsers-features ) but that isn't all you need to know.

Checking browserl.ist with the production settings you'll see IE 11 has greater usage than Edge still ( https://browserl.ist/?q=%3E0.2%25%2C+not+dead%2C+not+op_mini+all ) With a default CRA 3 app you'll get Syntax Error in main.chunk.js and other errors in your app with IE 11.

Answer 1

To stop the errors and get a default create-react-app React application working in IE 11:

1. Create your basic application with npx create-react-app [AppName]
2. Add import 'react-app-polyfill/ie11'; to the VERY top of index.js
3. If you need common standard functions like Array.find() that are not supported in IE 11 add import 'react-app-polyfill/stable'; just below the first line in index.js
4. In package.json copy the production browserlist to development so you can test in IE11 and all other browsers that will work in production
5. Delete the node_modules/.cache directory

Answer 2

IE 11 is a nightmare. There are some things that will probably solve the problem:

1. With react-app-polyfill you may update the main things which is a great point to start. The documentation is very straight forward to implement: https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill.
2. You are probably also using arrow functions so you'll also need babel to update that for you. The babel-plugin-transform-arrow-functions is your best solution for this. It is very nicely explained in the documentation: https://babeljs.io/docs/en/babel-plugin-transform-arrow-functions.
3. Check that the app is giving support to most of the browsers in browserslist.