为什么React应用仅在Android模拟器上出现Unhandled Runtime Error报错

• 核心原因是模拟器内置Chrome浏览器版本过低，不支持ES2020新增的带.的新语法（包括可选链?.、可选属性访问、类私有属性等），而你本地和实体机的Chrome版本较高，原生支持这类语法所以不会报错。
• Snowpack dev server默认开启极速编译模式，dev环境下默认不会对新语法做全量降级转译，仅适配高版本现代浏览器，未兼容模拟器的低版本Chrome，最终导致低版本浏览器解析代码时遇到未转译的新语法直接抛出Unexpected Token .报错。

• 方案1：升级模拟器Chrome版本
  打开模拟器内的Chrome浏览器，访问chrome://version查看当前版本，若版本低于80，直接在模拟器的Google Play商店搜索Chrome更新到最新版，重启浏览器后重新访问应用即可。
• 方案2：修改TS编译配置适配低版本浏览器
  打开项目根目录的tsconfig.json，将compilerOptions下的target字段调整为ES2019及更低版本，TS编译时会自动将可选链等新语法转译为低版本浏览器兼容的代码。
  示例配置：

  {
    "compilerOptions": {
      "target": "ES2019",
      // 其余原有配置保持不变
    }
  }
  

• 方案3：调整Snowpack转译目标
  打开项目根目录的snowpack.config.js，修改转译目标为低版本ES规范，同时配置兼容的浏览器范围，示例配置如下：

  module.exports = {
    buildOptions: {
      target: 'es2019',
    },
    env: {
      BROWSERSLIST: 'Chrome >= 79, Android >= 10'
    }
  }
  

  修改配置后重启Snowpack dev server，清理浏览器缓存后重新访问即可。
• 方案4：处理未转译的第三方依赖
  如果以上配置都不生效，检查是否有node_modules内的第三方依赖直接使用了未转译的ES2020+语法，Snowpack默认不会转译node_modules下的依赖，可在snowpack.config.js中将对应依赖添加到转译列表中。

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