Next.js项目执行yarn dev/build时遇Unexpected token 'export'错误求助

运行yarn dev或yarn build启动Next.js v12.1.0项目时，出现Unexpected token 'export'错误，报错信息如下：

> Build error occurred
/Users/.../my-repo/node_modules/next/server.js:1
export { NextRequest } from 'next/dist/server/web/spec-extension/request'
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/.../my-repo/node_modules/@clerk/nextjs/dist/server/utils.js:5:18)
    at Module._compile (node:internal/modules/cjs/loader:1101:14) {
  type: 'SyntaxError'
}

项目中node_modules/next/server.js内容：

export { NextRequest } from 'next/dist/server/web/spec-extension/request'
export { NextResponse } from 'next/dist/server/web/spec-extension/response'

当前next.config.js配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    dirs: ["."],
  },
  poweredByHeader: false,
  trailingSlash: true,
  basePath: "",
  env: {
    PROJECT_NAME: process.env.PROJECT_NAME,
  },
  reactStrictMode: true,
};

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer(nextConfig);

已尝试next-transpile-modules但无效，且必须使用Next.js v12.1.0，无法升级到v13.1及以上版本。

1. @clerk/nextjs版本与Next.js v12.1.0不兼容 #

报错显示@clerk/nextjs的server/utils.js在引入next/server.js时出错，说明当前使用的Clerk版本可能依赖了更高版本Next.js的ESM模块结构，而v12.1.0对ESM的处理存在限制。

• 解决：降级@clerk/nextjs到适配Next.js v12的版本，比如查找Clerk版本发布日志中明确支持Next.js v12的最新版本（如^4.11.0系列），修改package.json后重新执行yarn install。

2. Node.js版本不支持ESM模块加载 #

Next.js v12.1.0要求Node.js版本至少为v14.6.0或v16.0.0+，如果你的Node.js版本过低，会无法正确解析ESM模块的export语法。

• 解决：升级Node.js到v14.6.0以上的LTS版本，确保与Next.js v12.1.0兼容。

3. next-transpile-modules配置不正确 #

之前尝试的next-transpile-modules可能未包含需要转译的目标模块，需明确指定@clerk/nextjs及相关依赖。

• 解决：修改next.config.js，调整next-transpile-modules配置：

const withTM = require('next-transpile-modules')(['@clerk/nextjs']);
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer(withTM(nextConfig));

同时要确保next-transpile-modules的版本适配Next.js v12（推荐^9.0.0版本）。

4. 缓存或依赖冲突问题 #

可能是node_modules缓存或lock文件导致的依赖版本不一致，引发模块加载异常。

• 解决：
  • 删除node_modules和yarn.lock文件
  • 执行yarn cache clean清理本地缓存
  • 重新执行yarn install安装依赖

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