How to properly build a CRA project to support IE11? - cross-browser

Question

I'm working on a project that needs to support IE11.
We are using create-react-app.
"browserslist": {
"production": [
">0.2%",
"ie 11",
"not dead",
"not op_mini all"
]
}
Given the fact that IE11 is such an old browser, does it even make sense to add anything else to the browserslist config?
Couldn't I just do this?
"browserslist": {
"production": [
"ie 11"
]
}
Also, if I'm building targeting ie 11 do I also need to add react-app-polyfill ?
import 'react-app-polyfill/ie11';

Answer 1

Just found out that this:
"browserslist": {
"production": [
"ie 11"
]
}
Will remove many useful prefixes like -webkit-.
So, you should use:
"browserslist": {
"production": [
">0.2%",
"ie 11",
"not dead"
]
}
About the polyfills, you definitely need to add them as well.
From the image above, you can see that babel will transpile the arrow function () => {} to a syntax compatible with IE 11, but you can also see that Object.assign, Promise and URL will all need polyfills to work on older browsers that don't natively support them.
Here react-app-polyfill/ie11 you can see all the polyfills that are added for IE11.