My React App is not working on IE 11.
My client wants the app to work on at least ie11.
So, i have to solve this error.
I tried the official documentation from "react-app-polyfill". But it still doesn't work.
Please help me.
src/index.jsx
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
package.json
"dependencies": {
...
"@types/jest": "^24.0.25",
"@types/node": "^12.12.24",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"@types/react-redux": "^7.1.5",
"@types/react-router-dom": "^5.1.3",
"axios": "^0.19.0",
"install": "^0.13.0",
"node-sass": "^4.13.0",
"npm": "^6.13.4",
"react": "^16.12.0",
"react-app-polyfill": "^1.0.5",
"react-dom": "^16.12.0",
"react-hotkeys": "^2.0.0",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"typescript": "^3.7.4"
},
...
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
Supported Browsers By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use react-app-polyfill.
import 'react-app-polyfill/ie11'; import 'core-js/features/array/find'; import 'core-js/features/array/includes'; import 'core-js/features/number/is-nan'; at the top of the file. This will import and run all the polyfill code to add all the required ES6 features. in index.
React 18 supports all modern browsers (Edge, Firefox, Chrome, Safari, etc). If you support older browsers and devices such as Internet Explorer which do not provide modern browser features natively or have non-compliant implementations, consider including a global polyfill in your bundled application.
Perhaps the issue is related to the react-scripts version
, you are using react-scripts 3.3.0 and higher. You could check the package.json file to verify it.
There are some thread reports this error in GitHub, you could refer to them, for example: github.com/facebook/create-react-app/issues/8197, github.com/facebook/create-react-app/issues/8195.
As a workaround, you could try to downgrade the react-scripts version. As far as I know, it can still work with [email protected]
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With