解决create-react-app v3.3.0构建应用在IE11中无法运行的问题

看起来你遇到的IE11语法错误问题，核心原因是代码中存在未被转译的ES6+语法（比如箭头函数、解构赋值等）——IE11无法直接解析这些语法，而你之前尝试的polyfill方案主要是补全API，没法解决语法转译的本质问题。结合你的react-scripts版本（3.2.0），我来帮你梳理问题点和解决步骤：

1. 确保react-app-polyfill版本与react-scripts匹配 #

你之前安装的polyfill可能版本过高，和react-scripts 3.2.0不兼容，导致polyfill未生效。先重新安装对应版本：

npm uninstall react-app-polyfill
npm install react-app-polyfill@3.2.0 --save

然后必须把polyfill的导入放在index.jsx的最顶部，不能在其他import之后：

// 这两行必须是文件的前两行
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

// 之后才是其他代码的导入
import React from 'react';
import { render } from 'react-dom';
// ... 其余代码

2. 转译node_modules中的第三方依赖 #

Create React App默认不会转译node_modules里的代码，而你用到的某些依赖（比如react-router-dom）可能本身使用了IE11不支持的ES6+语法，导致打包后的chunk.js出现语法错误。我们可以用react-app-rewired和customize-cra自定义webpack配置来解决：

具体步骤：

• 安装依赖：

npm install react-app-rewired customize-cra --save-dev

• 修改package.json里的scripts，替换原有的react-scripts命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

• 在项目根目录创建config-overrides.js文件，添加以下配置：

const { override, addBabelPlugins } = require('customize-cra');

module.exports = override(
  // 添加babel插件，转译IE11不支持的核心语法
  addBabelPlugins(
    '@babel/plugin-transform-arrow-functions',
    '@babel/plugin-transform-destructuring',
    '@babel/plugin-transform-spread'
  ),
  // 配置转译node_modules中的指定依赖（这里以react-router-dom为例，可根据报错调整）
  (config) => {
    // 找到处理js/jsx的规则
    config.module.rules[1].oneOf.forEach(rule => {
      if (rule.test && rule.test.test('.js')) {
        // 添加需要转译的第三方包
        rule.include.push(/node_modules\/react-router-dom/);
        // 如果还有其他依赖（比如prop-types）有问题，可继续添加：rule.include.push(/node_modules\/prop-types/);
      }
    });
    return config;
  }
);

3. 清除缓存并重新构建 #

Create React App会缓存编译结果，可能导致新配置不生效，执行以下步骤：

# 删除缓存文件夹
rm -rf node_modules/.cache
# 删除node_modules并重新安装依赖
rm -rf node_modules
npm install
# 启动项目
npm start

4. 确保IE11使用最新渲染模式 #

在public/index.html的<head>标签里添加以下meta标签，防止IE自动切换到兼容模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

为什么之前的方案无效？ #

你之前尝试的@babel/polyfill或core-js，本质是补全IE11缺失的JavaScript API（比如Promise、Array.prototype.includes），但语法错误是代码无法被IE11解析（比如箭头函数() => {}），这时候需要先转译语法，再补全API。另外，polyfill版本不匹配、导入顺序错误，也会导致它无法正常生效。

如果按照上述步骤操作后仍有问题，可以查看报错的chunk.js对应的代码（在IE开发者工具中打开报错行），确认是哪个依赖或自己的代码存在未转译的语法，再针对性调整config-overrides.js的配置。

内容的提问来源于stack exchange，提问作者se22as