我的Next.js应用为什么无法在Mac端Safari浏览器正常运行？

核心原因 #

Mac端Safari的版本更新频率远低于iPhone端Safari，大量用户会长期停留在旧版本，不少新的Web API和JS语法在低版本Mac Safari中并未实现。从报错截图来看，本次触发错误的原因是低版本Mac Safari不支持ResizeObserverAPI，该API在Safari 13.1版本才正式上线，低于该版本的Mac Safari调用时就会抛出未定义错误。

其他可能的触发原因 #

• 代码中使用了其他高版本才支持的API，比如structuredClone（Safari 15.4支持）、Array.prototype.at()（Safari 15.4支持）
• Next.js的编译配置未做低版本浏览器适配，新语法没有被降级处理

修复方案 #

1. 补充API polyfill #

针对ResizeObserver缺失的问题，直接引入兼容polyfill即可：

• 安装依赖：npm install @juggle/resize-observer
• 在应用入口（_app.js/_app.tsx）顶部添加如下代码：

import { ResizeObserver as Polyfill } from '@juggle/resize-observer'

if (typeof window !== 'undefined' && !window.ResizeObserver) {
  window.ResizeObserver = Polyfill
}

2. 调整Next.js编译配置 #

在next.config.js中添加配置，开启旧版浏览器兼容：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    legacyBrowsers: true,
    browsersListForSwc: true
  }
}

module.exports = nextConfig

同时可以在项目根目录新增.browserslistrc文件，指定兼容范围：

last 2 versions
safari >= 12
ios >= 12

3. 排查第三方依赖 #

如果自身代码没有直接调用ResizeObserver，通常是引入的UI组件库或工具库内部使用了该API，添加polyfill后即可覆盖解决。

内容的提问来源于stack exchange，提问作者William.D