Android WebView 61版本报错globalThis is not defined的解决方案问询

针对WebView 61版本不支持globalThis的问题，共有三类可行处理方案：

1. 注入polyfill兼容低版本WebView #

该方案不需要修改现有业务代码，兼容成本最低，推荐优先使用：

• 第三方polyfill引入：安装@ungap/global-this依赖，执行命令npm install @ungap/global-this，随后在项目入口文件的第一行加入import '@ungap/global-this'即可。
• 手动写原生垫片：如果不想引入第三方依赖，可以在HTML的<head>标签最顶部插入如下script代码，保证在所有业务代码执行前完成垫片注入：

(function () {
  if (typeof globalThis === 'object') return;
  Object.defineProperty(Object.prototype, '__magic__', {
    get: function () { return this; },
    configurable: true
  });
  __magic__.globalThis = __magic__;
  delete Object.prototype.__magic__;
}());

注：如果使用React 18及以上版本，框架内部已经依赖globalThis，必须通过加垫片的方式处理，仅修改业务代码无法解决报错

2. 手动替换globalThis语法 #

如果项目中globalThis的使用场景较少，可以直接替换为环境兼容的写法：

• 仅针对WebView等浏览器环境的项目，直接把所有globalThis替换为window即可。
• 要兼容多端运行的项目，可以替换为兜底判断写法：
  typeof globalThis !== 'undefined' ? globalThis : (typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : this)

3. 调整WebView版本规避问题 #

如果你的App可以调整最低兼容的系统版本，直接将最低支持的WebView版本提升到71及以上即可从根源规避该问题。需要注意的是Android 10（API 29）及以上系统预装的WebView版本默认高于71，如果要兼容Android 9及以下系统，该方案不适用。

内容的提问来源于stack exchange，提问作者c-an