Next.js 13基础中间件示例编译报错：Class extends value undefined...

环境与操作背景 #

• Windows 系统，通过 create-next-app 创建 Next.js 13 项目，选择 TypeScript 和 /src 目录
• 在 pages 目录下新增 /cars/cars.ts 文件，仅输出 Hello world 文本
• 使用 VSCode 自动生成的「Next.js: Debug server-side」配置（launch.json）启动项目，原本运行无异常
• 在 pages 同级目录创建 middleware.ts，复制官方示例代码：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
    const requestHeaders = new Headers(request.headers);
    requestHeaders.set('x-version', '13');

    const response = NextResponse.next({
        request: {
            headers: requestHeaders,
        },
    });

    response.headers.set('x-version', '13');
    return response;
}

问题表现 #

按下F5启动调试后，项目编译成功，但首次访问页面时触发编译失败，核心错误信息：

Error [TypeError]: Class extends value undefined is not a constructor or null

错误关联 undici 库相关文件。

已尝试的无效操作 #

执行以下命令升级全部依赖，问题未得到解决：

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

可行解决方案尝试 #

1. 升级 Node.js 版本 #

Next.js 13 要求 Node.js 最低版本为 16.8，建议升级至 LTS 版本（如 18.x），旧版 Node.js 可能与 undici 库存在兼容性冲突。

2. 重置依赖安装 #

删除现有依赖目录和锁文件，重新安装依赖：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新安装
npm install

3. 调整 VSCode 调试配置 #

修改 launch.json，添加 NODE_OPTIONS 环境变量，避免自动配置可能存在的参数冲突：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node-terminal",
      "name": "Next.js: Debug server-side",
      "request": "launch",
      "command": "npm run dev",
      "env": {
        "NODE_OPTIONS": "--inspect"
      }
    }
  ]
}

4. 简化中间件代码排查 #

先使用最简版中间件测试，确认是否为代码逻辑导致的问题：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.next();
}

若简化后正常，再逐步添加 header 设置逻辑，定位具体触发点。

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