我们在使用create-react-app创建react项目之后，将项目在IE11/10/9浏览器打开时，发现页面白屏，打开控制台发现如下报错：

出现此问题的原因是：create-react-app默认只支持现代浏览器，具体可参考https://create-react-app.dev/docs/supported-browsers-features/支持列表。为了解决支持IE11/10/9浏览器，我们可以使用其提供的react-app-polyfill 来做兼容处理。假定已创建项目，并且使用 npm run start能正常启动项目，接下来按照下述方法来处理。

1）安装 react-app-polyfill

npm install react-app-polyfill --save

2）在index.js中进行配置，支持IE11的配置

// IE polyfill
import  "react-app-polyfill/ie9";
import  "react-app-polyfill/stable";

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

3）支持IE9/IE10的操作

1- 通过命令 npm install core-js mutation-observer --save 安装模块

npm install core-js mutation-observer --save 

2- 然后在项目的js入口文件index.js顶部引入模块 core-js和mutation-observer

// IE polyfill
import  "core-js/es";
import  "mutation-observer";
import  "react-app-polyfill/ie9";
import  "react-app-polyfill/stable";

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

3- 修改文件config/webpack.config.js,调换位置

 entry: [
      paths.appIndexJs,  // 新增
      // Include an alternative client for WebpackDevServer. A client's job is to
      // connect to WebpackDevServer by a socket and get notified about changes.
      // When you save a file, the client will either apply hot updates (in case
      // of CSS changes), or refresh the page (in case of JS changes). When you
      // make a syntax error, this client will display a syntax error overlay.
      // Note: instead of the default WebpackDevServer client, we use a custom one
      // to bring better experience for Create React App users. You can replace
      // the line below with these two lines if you prefer the stock client:
      // require.resolve('webpack-dev-server/client') + '?/',
      // require.resolve('webpack/hot/dev-server'),
      isEnvDevelopment &&
        require.resolve('react-dev-utils/webpackHotDevClient'),
      // Finally, this is your app's code:
      // paths.appIndexJs,  // 删除
      // We include the app code last so that if there is a runtime error during
      // initialization, it doesn't blow up the WebpackDevServer client, and
      // changing JS code would still trigger a refresh.
    ].filter(Boolean),

4- 通过命令 npm install setprototypeof --save 安装模块

npm install setprototypeof --save

5- 手动创建js文件 src/polyfill.js ，写入代码如下：

import setprototypeof from  'setprototypeof';

Object.setPrototypeOf = setprototypeof;

6- index.js引入polyfill.js文件

// IE polyfill
import  "./polyfill";
import  "core-js/es";
import  "mutation-observer";
import  "react-app-polyfill/ie9";
import  "react-app-polyfill/stable";

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

4）package.json中配置

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie > 9"    // 新增
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie > 9"  // 新增
    ]
  }

通过以上配置之后，此时项目就能支持IE9及其以上浏览器的访问了，如果想更好的支持IE浏览器，我们还需要对css样式加以处理，具体处理方式可参考对应文档。

如果遇到进行上述配置页面仍然空白，把项目node_modules文件夹删除，重装项目依赖后再次启动项目。