React Next.js项目中SyntaxError: Unexpected token 'export'错误解决

这是否属于Next.js编译错误？ #

是的，这类错误属于Next.js编译/转译流程中的兼容性问题。本质是Next.js的模块打包器（如Webpack、Turbopack）无法正确解析某些模块的导出语法，通常是因为模块使用了未被转译的ES模块语法，或者CommonJS与ES模块混用导致的冲突。

具体解决步骤 #

1. 排查并转译第三方依赖包 #

• 先定位最近新增的依赖，部分第三方包可能直接使用了未转译的export语法，而Next.js默认不会转译node_modules内的包。
• 找到问题包后，在next.config.js中配置transpilePackages，强制Next.js转译该包：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['问题包名称'],
}

module.exports = nextConfig

2. 统一项目文件的导出语法 #

• 确保项目内文件统一使用ES模块（export/import）或CommonJS（module.exports/require），禁止在单个文件中混用两种语法。
• 比如不要同时写export default xxx和module.exports = xxx。

3. 检查Next.js版本兼容性 #

• 若近期升级过Next.js，可能存在版本间语法兼容问题。可尝试回退到之前的稳定版本，或查阅官方文档确认新版本的语法要求。
• 执行命令回退版本：

npm install next@x.x.x # 替换为之前的稳定版本号

4. 校验自定义Babel配置 #

• 如果你自定义了babel.config.js或.babelrc，确保配置包含Next.js所需的预设，避免破坏默认转译逻辑：

module.exports = {
  presets: ['next/babel'],
}

5. 清理缓存后重新构建 #

• 缓存异常也可能引发这类编译问题，执行以下命令清理缓存：

npm run build --clean
# 或手动删除项目根目录下的.next文件夹和node_modules/.cache文件夹

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