使用Next.js+Turbo Pack开发时移动端出现TypeError: r.at is not a function问题求助

问题原因 #

Array.prototype.at()是ES2022新增的API，iPhone设备上的旧版Chrome（版本低于92）不支持该语法。Turbo Pack默认未对第三方依赖（如Chakra UI）的新语法进行转译，而桌面端开发者工具模拟的是较新的浏览器环境，因此不会出现问题，最终定位到Chakra UI的Avatar组件内部使用了该API。

解决方法 #

方法1：配置Next.js转译Chakra UI依赖 #

在next.config.js中添加transpilePackages配置，强制Turbo Pack转译Chakra UI相关包：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@chakra-ui/react', '@chakra-ui/system', '@chakra-ui/avatar'],
  experimental: {
    turbo: true
  }
};

module.exports = nextConfig;

方法2：添加API Polyfill #

在你的_app.js或_app.tsx入口文件顶部引入Array.prototype.at()的polyfill：

import 'core-js/es/array/at';

需要先安装core-js依赖：

npm install core-js
# 或
yarn add core-js

方法3：升级Chakra UI版本 #

检查并升级Chakra UI到最新稳定版，官方可能已修复该兼容性问题：

npm update @chakra-ui/react
# 或
yarn upgrade @chakra-ui/react

内容的提问来源于stack exchange，提问作者Tom Fan