How do I support IE 11 with Create React App 3.0?
IE 11 is a nightmare. There are some things that will probably solve the problem:
- 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. - 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. - Check that the app is giving support to most of the browsers in
browserslist
.
To stop the errors and get a default create-react-app React application working in IE 11:
- Create your basic application with
npx create-react-app [AppName]
- Add
import 'react-app-polyfill/ie11';
to the VERY top of index.js - 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 - In package.json copy the production browserlist to development so you can test in IE11 and all other browsers that will work in production
- Delete the node_modules/.cache directory