React应用在Safari 14.1中报错：d.split("+").at is not a function

问题原因 #

你推测错误来自bundle.js是正确的。这个报错的核心原因是Safari 14.1不支持ES2022新增的数组at()方法，而Chrome和新版Safari已经实现了这个API。代码里的d.split("+").at(-1)试图用at(-1)取数组最后一项，旧版Safari识别不了这个方法，所以抛出undefined错误。

解决方案 #

1. 替换at()的写法 #

直接把at(-1)改成所有浏览器都兼容的写法：

• 写法一：d.split("+")[d.split("+").length - 1]
• 写法二：d.split("+").slice(-1)[0]
  这两种方式都能实现取数组最后一项的效果，且兼容Safari 14.1及更早版本。

2. 用Babel转译兼容代码 #

如果项目使用Babel（比如Create React App默认配置），可以通过配置让at()语法被转译成旧浏览器能识别的代码：

• 安装@babel/plugin-proposal-array-at插件
• 在Babel配置文件（如.babelrc或babel.config.js）中添加该插件，或者使用@babel/preset-env并设置目标浏览器为safari >= 14.1，让Babel自动处理兼容性转译。

3. 检查第三方依赖 #

如果at()是来自第三方依赖库的代码，需要：

• 查看依赖库的版本，确认是否有兼容旧浏览器的版本，升级或降级到对应版本
• 若依赖库本身未做兼容配置，可在webpack配置中修改transpileDependencies，将该依赖加入转译列表，让Babel一并处理其代码的兼容性。

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