Create-React-App在IE11白屏，提示WebSocket、Promise未定义

故障现象 #

• 项目基于Create-React-App框架搭建，在Chrome、Edge、Firefox等所有主流现代浏览器下均可正常加载运行
• 仅在IE11环境打开时页面呈现完全空白，控制台抛出两类SCRIPT5009报错：
  • WebSocket 未定义
  • Promise 未定义

已尝试的排查操作 #

• 先后安装2.0版本、1.0.6版本的react-app-polyfill依赖
• 在src/index.js文件的最顶部引入react-app-polyfill/ie11与react-app-polyfill/stable
• 为开发、生产环境对应的browsersList配置项，全部新增ie 11适配规则
• 手动删除node_modules路径下的.cache缓存文件
• 完成上述全部操作后，控制台仍弹出完全一致的报错，页面空白问题未得到解决

配套排查材料 #

留存有对应截图可辅助定位问题，涵盖以下内容：

• package.json依赖配置截图
• browsersList配置项截图
• polyfill引入位置的代码截图
• 控制台完整报错信息截图
• WebSocket、Promise未定义报错指向的对应代码片段截图

针对性排查解决方向 #

• 校验模块导入执行顺序：JS模块是按导入顺序同步执行的，即使把polyfill的代码写在src/index.js文件的第一行，只要前面存在其他import语句，polyfill的执行顺序仍然晚于那些导入的模块。必须保证两个polyfill的引入语句是整个文件最先执行的代码，不能在polyfill加载前导入任何会在模块顶层执行逻辑的业务模块或第三方依赖，否则会出现全局API未定义的报错。
• 确认browsersList配置的生效范围：CRA默认读取package.json下全局的browserslist字段完成构建兼容适配，如果分散在开发、生产环境分块配置规则时遗漏了生产环境的ie 11适配项，生产构建流程就不会针对IE11做转译和polyfill注入。建议统一使用全局browserslist字段配置规则，避免分散配置导致规则不生效。
• 验证构建产物的polyfill注入位置：执行生产构建后，打开打包生成的JS入口文件，搜索Promise、WebSocket的polyfill实现代码，确认相关实现是在文件开头位置被注入。如果搜索不到对应代码，说明browsersList规则没有被CRA的构建流程正确识别。
• 排查第三方依赖的兼容问题：如果项目中引入的第三方包在模块顶层直接调用WebSocket或Promise，且该包没有被CRA的babel转译流程处理，就会因为代码执行位置早于polyfill注入逻辑而触发报错。这类情况需要针对该依赖单独添加babel转译规则，或更换为兼容IE11的对应依赖版本。
• 排除浏览器安全拦截：IE11默认的安全设置可能会拦截localhost地址的WebSocket连接，可将项目调试地址加入IE的可信站点列表后再次验证。

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