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