Next.js项目Vercel部署失败报Unexpected token 'export'错误

问题原因 #

• 依赖包格式不兼容：绝大部分该类报错都是由于用到的第三方依赖仅发布了ESM格式版本，而Next.js生产构建时默认不会转译node_modules目录下的依赖，会将其统一按照CommonJS格式解析，export是ESM的导出关键字，在CommonJS规范下无法被识别就会抛出该错误。而本地dev模式使用的即时编译逻辑会自动兼容ESM格式的依赖，所以不会触发报错。
• 项目配置异常：如果是项目自身代码抛出的该错误，通常是package.json未配置"type": "module"，项目内的.js文件会被默认识别为CommonJS模块，此时使用ESM的export语法就会冲突。也有可能是tsconfig.json的compilerOptions.module字段配置为CommonJS，但代码中使用了ESM导出语法导致的不匹配。
• 引入语法错误：代码中使用require语法引入了ESM格式的依赖，require是CommonJS的导入语法，无法解析ESM模块的export导出，dev模式的兼容逻辑会临时规避该问题，但生产构建的严格校验会触发报错。

解决方案 #

1. 首先从错误栈中定位报错文件的路径，确认报错是来自node_modules下的第三方依赖，还是项目自身的代码
2. 如果是第三方依赖导致的报错，在next.config.js中添加transpilePackages配置，强制Next.js在构建时转译对应的依赖包，参考配置如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 数组中替换为你实际查到的报错依赖名，可填多个
  transpilePackages: ['problem-package-name'],
}

module.exports = nextConfig

3. 如果是项目自身代码导致的报错，可在package.json中添加"type": "module"配置，将项目内所有.js文件默认识别为ESM模块；或者调整代码中的导出语法，统一使用CommonJS的module.exports语法。
4. 检查全量代码的依赖引入语法，所有ESM格式的包统一使用import语法引入，不要混用require。

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