如何阻止React 18自动注入bundle.js？IE11兼容问题求助

一、你的排查方向没问题 #

React 18默认打包产物不再兼容IE11，自动注入的bundle.js包含IE11无法解析的ES6+语法，脚本加载阶段就会报错，导致后续提示代码完全没机会执行，这就是核心问题。

二、阻止自动注入bundle.js的两种方法 #

1. 手动控制入口脚本加载（Create React App项目适用） #

• 在public/index.html中移除React自动注入的占位注释<!-- react-scripts -->，这样React就不会自动插入bundle.js的脚本标签。
• 添加条件判断脚本，仅在非IE11环境加载bundle.js，IE11环境直接渲染纯HTML提示：

<script>
  // 检测IE11
  const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
  if (isIE11) {
    // 纯ES5语法渲染提示，不依赖React
    document.body.innerHTML = '<div style="text-align:center; margin-top:50px; font-size:20px;">您的浏览器版本过低，请更换为Chrome、Edge等现代浏览器访问</div>';
  } else {
    // 手动加载React打包脚本
    const script = document.createElement('script');
    script.src = '/static/js/bundle.js';
    script.defer = true;
    document.body.appendChild(script);
  }
</script>

2. 修改webpack配置（需eject或用craco/customize-cra） #

如果不想手动管理脚本，也可以让打包产物兼容IE11，但会增加打包体积和编译时间：

• 安装react-app-polyfill，在src/index.js顶部导入：

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

• 修改package.json的browserslist配置：

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

• 用craco或customize-cra扩展webpack配置，确保所有依赖都被@babel/preset-env转译为IE11兼容语法。

三、更简便的替代方案：提前加载纯ES5提示脚本 #

不用阻止自动注入，在index.html最顶部添加一段纯ES5检测脚本，检测到IE11时直接覆盖页面内容并终止后续加载：

<script type="text/javascript">
  var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
  if (isIE11) {
    document.write('<style>body{margin:0;padding:0;font-family:Arial,sans-serif;}</style>');
    document.write('<div style="width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;">');
    document.write('<h2>浏览器版本不支持</h2>');
    document.write('<p>请使用Chrome、Edge、Firefox等现代浏览器访问本网站</p>');
    document.write('</div>');
    // 终止页面后续加载，避免bundle.js报错
    window.stop();
  }
</script>

这段代码IE11可正常解析，会在React脚本加载前完成提示渲染，彻底规避语法错误问题。

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