React兼容IE11使用lazy/Suspense出现SCRIPT1053 Const未初始化报错

问题根因 #

1. React官方lazyAPI本身未对IE11做适配，其依赖的动态import语法、Promise微任务调度逻辑在IE11下存在原生缺陷，即使加了基础polyfill也可能出现编译后语法不符合ES5规范的问题。
2. webpack5默认对异步chunk的语法转换不彻底，即使配置了target: es5，也可能产出包含未初始化const声明、箭头函数等ES6+语法的异步加载代码，IE11不允许const声明时不赋值，直接抛出SCRIPT1053错误。
3. 你使用了模块联邦加载远程微前端组件，如果远程组件未做IE11兼容编译，其包含的ES6+语法会直接在IE11下报错，主应用的兼容配置不会处理外部加载的远程代码。
4. 现有babel配置缺少动态import语法的转换插件，动态import属于提案语法，@babel/preset-env默认不会转换。

解决方案 #

1. 优先替换React.lazy为兼容IE11的懒加载方案 #

React官方文档明确标注React.lazy不支持IE11，推荐在需要兼容IE11的场景下使用@loadable/component作为替代：

• 安装依赖：

  npm install @loadable/component
  npm install @loadable/babel-plugin -D
  

• 修改babel配置，新增插件：

  "plugins": [
    "@loadable/babel-plugin",
    // 原有其他插件保留
  ]
  

• 替换原有懒加载写法：

  import loadable from '@loadable/component';
  // fallback可以在这里配置，也可以保留外层Suspense
  const SandboxLazy = loadable(() => import('./microfronts/Sandbox'));
  

2. 补全webpack配置强制输出ES5语法 #

在webpack配置的output字段中新增environment配置，明确禁止webpack产出ES6+语法：

output: {
  publicPath: '/',
  environment: {
    arrowFunction: false,
    const: false,
    destructuring: false,
    dynamicImport: false,
    forOf: false,
    module: false,
    optionalChaining: false,
    templateLiteral: false,
  }
},

3. 补全babel动态import语法转换插件 #

安装@babel/plugin-proposal-dynamic-import，并添加到babel配置的plugins中，将动态import语法转换为兼容ES5的实现：

"plugins": [
  "@babel/plugin-proposal-dynamic-import",
  // 其他原有插件保留
]

4. 检查微前端远程包的兼容配置 #

确保你通过模块联邦加载的Sandbox等远程组件的编译配置也做了完整的IE11兼容，同样需要配置babel转ES5、对应polyfill，以及webpack输出ES5的相关配置。

5. 确认React版本不高于17.x #

React 18及以上版本已经完全停止对IE11的支持，内部实现包含大量不会被转译的ES6+语法，兼容IE11请将React版本锁定在17.x及更低。

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