ReactJS生产构建在IE11报错SCRIPT1010：缺少标识符

我之前也踩过IE11的兼容坑，太懂这种看着控制台报错却摸不着头脑的感觉了。你遇到的SCRIPT1010: Expected identifier错误，核心原因是生产构建后的代码里还残留着IE11不支持的ES6+语法——具体来说就是__esModule和default导出相关的逻辑没被转译成IE能识别的ES5代码。下面是一步步的解决办法：

1. 先确认浏览器兼容配置 #

首先检查你的package.json里的browserslist配置，必须明确包含IE11，否则create-react-app不会为IE做兼容处理：

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

2. 添加IE11所需的Polyfill #

在项目的src/index.js最顶部导入官方的polyfill，补全IE11缺失的ES6+ API支持：

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

3. 修改Babel转译配置（关键步骤） #

create-react-app默认不会转译node_modules里的代码，但很多第三方依赖输出的是ES6+代码，这就导致IE11无法识别。我们可以用react-app-rewired和customize-cra来修改配置，不用 eject 项目：

• 先安装依赖：

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

• 修改package.json里的scripts命令，替换成react-app-rewired：

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

• 在项目根目录创建config-overrides.js文件，配置Babel转译范围：

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

module.exports = override(
  babelInclude([
    path.resolve('src'), // 确保src目录代码被转译
    // 如果是某个特定依赖导致的问题，可以单独指定它，比如：
    // path.resolve('node_modules/antd'),
    // 要是不确定哪个依赖，也可以直接转译所有node_modules（会增加构建时间）：
    // path.resolve('node_modules')
  ])
);

4. 验证修复效果 #

重新执行npm run build，把构建后的产物放到IE11里测试，应该就能正常运行了。

如果还是有问题，建议检查一下是否有依赖使用了更高级的语法（比如箭头函数、解构赋值没被转译），可以在config-overrides.js里添加额外的Babel插件，比如@babel/plugin-transform-modules-commonjs来处理模块导出的问题。

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