CRA创建的React应用在IE11中报TypeError: Can't redefine non-configurable property 'error'错误

这个错误是IE11的特性限制触发的：IE11不允许通过Object.defineProperty重定义标记为non-configurable的属性，该问题和你使用的请求库（fetch/axios）无关，错误触发的常见原因有2种：

1. polyfill引入顺序错误或存在重复polyfill冲突，CRA自带的react-app-polyfill和第三方依赖内置的ES特性polyfill（比如es6-promise、core-js旧版本）重复加载，会导致Promise相关实现内部重复定义属性触发报错
2. 接口返回的响应体中包含error字段，请求库解析响应时默认调用的属性赋值方法未设置configurable: true标记，触发IE11的属性重定义限制

• 第一步：调整polyfill引入顺序，在项目入口文件src/index.js的最顶部引入IE11适配polyfill，所有其他import（包括React、组件、第三方库的引入）都要放在这两行之后：

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

• 第二步：修改package.json中的browserslist配置，确保生产和开发环境都明确声明适配IE11，避免开发环境polyfill未注入：

{
  "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"
    ]
  }
}

• 第三步：在请求库的响应拦截层添加数据转换，避免直接使用原始响应对象的属性定义：
  如果使用axios，添加全局响应拦截器：

import axios from 'axios';
axios.interceptors.response.use(
  (response) => {
    // 序列化后反序列化转为普通对象，消除原始响应的属性配置限制
    return JSON.parse(JSON.stringify(response));
  },
  (error) => {
    return Promise.reject(error);
  }
);

如果使用fetch，解析响应时做相同处理：

fetch('/api/xxx')
  .then(res => res.json())
  .then(rawData => JSON.parse(JSON.stringify(rawData)))
  .then(data => { /* 业务处理 */ })

• 第四步：清理依赖缓存后重新构建：删除node_modules文件夹、package-lock.json或yarn.lock文件后重新执行依赖安装，再启动项目验证。

IE11对sourcemap的支持存在缺陷，且错误多触发在polyfill内部逻辑中，因此sourcemap无法定位到业务代码触发位置属于正常现象，不需要额外排查sourcemap配置问题。

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