记录一次 iOS 16.1 JavaScript 语法兼容性问题

记录一次 iOS 16.1 JavaScript 语法兼容性问题

在使用 Next.js 开发一个线上应用的时候,发现页面在 iOS 16.1 点击没反应。当时得到这个问题反馈的时候,我第一反应肯定是 JavaScript 语法兼容性的问题。于是开启了 Debug 的过程。

报错是这样的, SyntaxError: Unexpected token '{'

  1. 首先安装了 iOS 16.4 模拟器在 safari 中测试了一下网页,发现页面没有报错,测试结果符合预期。
  2. 安装 iOS 16.1 模拟器,在 safari 中打开网页,复现了报错的场景。
  3. Dev tools 提供的报错信息只能定位到bundle.js,打开开发环境,定位到了具体的错误文件,引用的node_modules下的一个第三方库存在语法问题。
  4. 排除法 Debug,先将引用的这个第三方的 bundle 在线格式化,然后从文件头部开始依次删掉代码,看报错是否能被排除
  5. 删除到一个 class 的时候,发现报错消失。阅读 class 的代码发现,其中有这样的写法
1
2
3
4
5
class ClassWithSIB {
static {
// …
}
}

具体该语法的含义在这里可以查到:Static initialization blocks

也就印证了之前的猜测,在 iOS 16.1 上针对该语法存在一个兼容性问题。

解决方式:

针对该 nodule_modules 的该文件进行语法降级就行,语法降级的方式有很多,如果是 webpack,在对应的 babel_loader 或者其他编译器 loader 下进行配置即可。

作者

monster1935

发布于

2024-05-19

更新于

2024-09-25

许可协议