Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"react-app-polyfill" doesn't work in IE11

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"
    ]
  }
like image 406
brent jeong Avatar asked Jan 21 '20 05:01

brent jeong


People also ask

Does react work in ie11?

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.

How do you add polyfill to react?

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.

Is react compatible with Internet Explorer?

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.


1 Answers

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].

like image 66
Zhi Lv Avatar answered Oct 13 '22 18:10

Zhi Lv