React在Android 4.4.2 WebView及手机中无法运行，报错Map is not defined求助

嘿，我之前也踩过几乎一模一样的坑！Android 4.4.2的WebView真的是前端开发者的“老熟人”，兼容性问题特别多。

问题根源 #

Android 4.4.2自带的WebView内核基于Chrome 30左右的版本，这个版本完全不支持ES6原生的Map、Set等对象。而从React 16开始，官方不再默认打包这些ES6特性的polyfill（React 15及以前版本还包含），所以当React代码内部用到Map时，旧WebView就会抛出Map is not defined的错误，直接导致整个应用无法渲染——哪怕是最简单的<p>hello world</p>也跑不起来。

解决方案（按推荐程度排序） #

• 添加ES6特性的Polyfill（最推荐）
  用core-js来补充这些缺失的特性是最稳妥的办法：

  1. 先安装依赖：

     npm install core-js@3 --save
     

  2. 在你的React项目入口文件（比如index.js）最顶部导入：

     import 'core-js/stable'; // 一次性导入所有必要的ES6+ polyfill
     // 也可以精准导入只需要的部分：
     // import 'core-js/es/map';
     // import 'core-js/es/set';
     

  如果你的项目用了Babel，还可以配置@babel/preset-env自动按需添加polyfill，不用手动导入：
  在babel.config.json里设置：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "android": "4.4"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }],
      "@babel/preset-react"
    ]
  }
  

  这样Babel会根据目标环境自动注入需要的polyfill，省心又高效。

• 检查Android WebView的基础设置
  如果你是在自己开发的Android App里加载页面，记得确认WebView启用了JavaScript：

  WebSettings webSettings = webView.getSettings();
  webSettings.setJavaScriptEnabled(true);
  

  另外，尽量引导用户把设备的WebView更新到系统允许的最新版本（Android 4.4虽然没法更到太新，但更新后兼容性会有明显提升）。

• 临时降级React版本（不推荐）
  要是你只是应急测试，可以暂时降级到React 15.x版本，它默认包含了这些ES6特性的polyfill，能直接在Android 4.4.2 WebView运行。但不建议长期用旧版本，毕竟会错过安全补丁和新功能。

总结 #

最靠谱的方案还是添加polyfill，既能保留React 16的新特性，又能完美兼容旧WebView。我当时就是用core-js加Babel配置解决的，亲测有效！

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