新建React项目启动报错：tracer.js中Unexpected token '??'

问题背景 #

新建React项目（基于Next.js，初始化时所有选项选“是”），未修改任何代码，启动项目时触发语法错误。

报错信息 #

project-path/node_modules/next/dist/server/lib/trace/tracer.js:92
const spanName = options.spanName ?? type;
^

SyntaxError: Unexpected token '?'

项目依赖的next包中tracer.js文件存在多处??（空值合并运算符）语法，核心代码片段如下：

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
// ... 其余代码省略
const spanName = options.spanName ?? type;
// ... 其余代码省略

原因分析 #

• ??是ES2020标准新增的空值合并运算符，仅在Node.js 14.17.0及以上版本中支持。本地Node.js版本过低，无法识别该语法，导致启动时报错。
• 直接修改node_modules目录下的代码不是可行方案，依赖包更新后修改内容会被覆盖，且手动替换所有??语法效率低、易出错。

解决方案 #

1. 升级Node.js版本（推荐） #

这是最根本的解决办法，步骤如下：

• 查看当前Node.js版本：执行命令 node -v
• 使用Node版本管理器（nvm）安装并切换到LTS版本：
  • 安装nvm后，执行 nvm install --lts 安装最新长期支持版本
  • 执行 nvm use --lts 切换到该版本

2. 降级Next.js版本（备选） #

若无法升级Node.js，可降级Next.js到兼容旧版本Node的版本（比如Next.js 12.x，最低支持Node.js 12.22.0）：

• 修改项目根目录下package.json中next的版本号为^12.3.4
• 执行 npm install 或 yarn install 重新安装依赖

临时替换??的写法（不推荐） #

如果仅做临时测试，a ?? b等价于(a !== null && a !== undefined) ? a : b，例如报错行可修改为：

const spanName = (options.spanName !== null && options.spanName !== undefined) ? options.spanName : type;

但不建议长期使用该方式，依赖包更新后会丢失修改。

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