WAGMI + NextJS移动端浏览器报错：SyntaxError: Unexpected token '?'

这个错误是因为代码中使用了可选链操作符（?.），而目标移动端浏览器不支持该语法，或者Wagmi及其依赖未被NextJS正确转译为兼容低版本环境的代码。可按以下步骤解决：

1. 确认浏览器版本 #

可选链操作符需要Chrome 80+、Safari 13.1+等现代浏览器支持，先检查移动端浏览器版本是否达标，若为旧版本建议升级。

2. 配置NextJS转译第三方依赖 #

在next.config.js中添加transpilePackages配置，强制NextJS转译Wagmi及其核心依赖，确保输出兼容移动端的代码：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['wagmi', '@wagmi/core', 'viem'],
}

module.exports = nextConfig

3. 升级Wagmi版本 #

你当前使用的0.8.6是较旧版本，新版本已优化兼容性与转译处理，执行命令升级：

• npm：npm update wagmi
• yarn：yarn upgrade wagmi

4. 检查自定义Babel配置（如有） #

若项目自定义了babel.config.js，确保包含@babel/plugin-proposal-optional-chaining插件（NextJS默认已集成，但若有修改需确认）：

module.exports = {
  plugins: ['@babel/plugin-proposal-optional-chaining'],
}

内容的提问来源于stack exchange，提问作者Luca Ford