React WebApp在Android 8.1 WebView中因Object.fromEntries崩溃，Babel配置无效求助

核心问题 #

Android 8.1自带的系统WebView基于Chrome 69，确实不支持Object.fromEntries。你的Babel配置仅做了语法转译，但未开启全局API的polyfill，导致该方法在旧环境中仍会触发报错崩溃。

调整Babel配置的步骤 #

1. 安装core-js（当前Babel官方推荐用它替代旧版@babel/polyfill）

   npm install core-js@3 --save
   # 或使用yarn
   yarn add core-js@3
   

2. 修改preset-env配置，补充polyfill相关选项，同时优化targets避免版本冲突：

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "loose": true,
           "modules": false,
           "shippedProposals": true,
           "targets": {
             "android": "8.0"
             // 移除browsers配置，避免与android版本规则冲突
           },
           "useBuiltIns": "usage",
           "corejs": 3
         }
       ],
       [
         "@babel/preset-react",
         {
           "useBuiltIns": true,
           "pragma": "React.createElement"
         }
       ],
       "@babel/preset-typescript"
     ],
     "plugins": [
       [
         "@babel/plugin-proposal-class-properties",
         {
           "loose": true
         }
       ],
       "@babel/plugin-syntax-dynamic-import",
       "babel-plugin-macros",
       [
         "@babel/plugin-transform-runtime",
         {
           "helpers": true,
           "regenerator": true,
           "corejs": 3 // 同步配置runtime使用core-js的polyfill
         }
       ]
     ]
   }
   

   • useBuiltIns: "usage"会根据目标环境自动检测代码中用到的API，按需引入对应的polyfill模块，无需手动全局导入
   • corejs: 3指定使用core-js第3版本，覆盖ES6+全量API的兼容补丁

3. 检查TypeScript配置
   确保tsconfig.json的target设置为ES6或更低版本，避免TypeScript输出超出旧环境兼容范围的代码：

   {
     "compilerOptions": {
       "target": "ES6",
       // 其他配置保持不变
     }
   }
   

备用方案（若上述配置未生效） #

如果仍有问题，可在项目入口文件（如index.js或App.tsx）顶部手动添加polyfill：

// 手动实现Object.fromEntries的兼容逻辑
if (!Object.fromEntries) {
  Object.fromEntries = function(entries) {
    return entries.reduce((obj, [key, value]) => {
      obj[key] = value;
      return obj;
    }, {});
  };
}

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