如何在IE11浏览器中使用react-recoil状态管理库？

错误原因 #

IE11不支持Shadow DOM的attachShadow方法，而Recoil 0.7.5在开发环境默认启用的DevTools组件（ReactDevOverlay）内部使用了依赖该API的<Portal>组件，因此抛出错误。

解决方案： #

• 禁用Recoil调试工具
  在RecoilRoot组件中添加disableDebugging={true}属性，关闭开发环境的调试工具，避免加载依赖Shadow DOM的Portal组件：

  import { RecoilRoot } from 'recoil';
  
  function MyApp({ Component, pageProps }) {
    return (
      <RecoilRoot disableDebugging={true}>
        <Component {...pageProps} />
      </RecoilRoot>
    );
  }
  
  export default MyApp;
  

• 补充必要的Polyfill
  IE11缺少ES6+核心API支持，需添加polyfill：

  1. 安装依赖：

     npm install core-js regenerator-runtime
     

  2. 在_app.js顶部导入：

     import 'core-js/stable';
     import 'regenerator-runtime/runtime';
     

• 配置Next.js兼容IE11
  确保Babel配置针对IE11优化，在项目根目录创建.babelrc：

  {
    "presets": [
      ["next/babel", {
        "preset-env": {
          "targets": {
            "ie": "11"
          }
        }
      }]
    ]
  }
  

  同时在next.config.js中启用polyfill：

  module.exports = {
    reactStrictMode: true,
    polyfill: true,
  };
  

• 验证生产环境
  生产环境下Recoil默认关闭调试工具，开发环境修复后，建议构建生产版本并在IE11中测试确认问题已解决。

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