旧款iPhone出现Object.fromEntries is not a function报错如何解决

问题原因 #

Object.fromEntries 是 ES2019 新增的原生API，iPhone 7、iPhone X这类旧款iPhone设备自带的Safari浏览器版本低于14.1，原生不支持该API。这个错误属于前端客户端运行时兼容性问题，和你本地升级Node版本没有关联，所以升级Node无法解决问题。

可行解决方法 #

方案1：添加对应polyfill（兼容性最好，优先推荐） #

你可以选择两种实现方式：

• 引入第三方polyfill包：
  1. 执行安装命令：npm install object.fromentries
  2. 在项目全局入口文件（Next.js项目是pages/_app.js）的最顶部加入以下代码：

  import fromEntriesPolyfill from 'object.fromentries'
  
  if (!Object.fromEntries) {
    fromEntriesPolyfill.shim()
  }
  

• 手动实现polyfill，无需安装额外依赖，直接在全局入口文件顶部添加如下代码即可：

  if (!Object.fromEntries) {
    Object.fromEntries = function (iterable) {
      return [...iterable].reduce((res, [key, value]) => {
        res[key] = value
        return res
      }, {})
    }
  }
  

方案2：替换现有调用写法 #

如果你的项目里用到Object.fromEntries的地方很少，可以直接把所有调用该API的代码，替换成上方手动polyfill里的reduce实现写法。

方案3：配置Next.js浏览器兼容规则 #

你使用的是Next.js 11版本，可以在package.json中添加browserslist配置，指定需要兼容的低版本设备范围，Next.js打包时会自动引入对应的polyfill：

{
  "browserslist": [
    "defaults",
    "iOS >= 12",
    "Safari >= 12"
  ]
}

配置完成后重新打包部署即可生效。

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