Next.js+TypeScript中数字用下划线分隔报错的原因及解决方法

报错原因 #

数字下划线分隔符（15_5000_000这类写法）是ES2021引入的语法特性。你遇到的报错是因为Next.js默认的SWC编译器未正确启用对该语法的解析支持，导致next-swc-loader处理代码时无法识别数字后的下划线，进而抛出"Identifier directly after number"错误。

解决方法 #

1. 调整TypeScript配置 #

在项目根目录的tsconfig.json中，确保target字段设置为ES2021或更高版本，让TypeScript先支持该语法：

{
  "compilerOptions": {
    "target": "ES2021",
    // 其他原有配置...
  }
}

如果项目需要兼容低版本浏览器，可保留target为较低版本，同时补充相关配置确保支持特性转译：

{
  "compilerOptions": {
    "target": "ES5",
    "lib": ["ES2021", "DOM"],
    "downlevelIteration": true,
    // 其他原有配置...
  }
}

2. 显式配置SWC编译器（TS配置调整后仍报错时） #

在next.config.js中手动开启SWC对数字分隔符的解析支持：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    compiler: {
      parser: {
        javascript: {
          numericSeparator: true,
        },
      },
    },
  },
};

module.exports = nextConfig;

3. 升级Next.js版本 #

若使用的是较旧的Next.js版本，SWC对ES2021特性的支持可能存在缺陷。执行以下命令升级到最新稳定版：

npm install next@latest react@latest react-dom@latest

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