React 生产版本不适用于 IE 11

Question

My react project is using express as backend. When I am running project in development mode using "npm start" for React and "node server.js" for express server I am able to use it in chrome as well as in IE 11. When I am creating production build using "npm run build" and running it using "node server.js" it works in Chrome but in IE 11 its not working. I dont see any error in console.

I am using below statements at start of index.js to make code IE 11 compatible.

import 'core-js/es6/map'; import 'core-js/es6/set'; import 'raf/polyfill';

React version - 16. Project created using create-react-app.

I think it is not working because webpack.config.prod.js is not bundling IE 11 compatible code.

Answer 1

you should use : react-app-polyfill

This package includes polyfills for various browsers. It includes minimum requirements and commonly used language features used by Create React App projects.

Usage First, install the package using Yarn or npm:

npm install react-app-polyfill

or

yarn add react-app-polyfill

For IE9:

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

For IE11:

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

Answer 2

From the official documentation :

React supports all popular browsers, including Internet Explorer 9 and above, although some polyfills are required for older browsers such as IE 9 and IE 10.

Install these two packages.

  npm install babel-polyfill
  npm install react-app-polyfill

This must be the first line in src/index.js

import "react-app-polyfill/ie9"
import "react-app-polyfill/ie11"
import "react-app-polyfill/stable"
import 'raf/polyfill';

You can also configure your manifest to handle different browsers, using the following doc : https://github.com/browserslist/browserslist

example :

"browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9" ]

Answer 3

import "react-app-polyfill/ie11"

import "react-app-polyfill/stable"

The second line(react-app-polyfille/stable) did the trick for me. I was trying to load a react page in a desktop application which uses ie11 to render pages