在Vercel部署Storybook遇Edge Function中间件不支持模块错误求助

方案1：配置Vercel仅部署Storybook静态资源 #

Storybook是独立静态站点，无需加载Next.js的Edge Function（如middleware.ts）。通过vercel.json指定部署规则，排除无关文件：

创建项目根目录的vercel.json文件：

{
  "buildCommand": "pnpm run build-storybook",
  "outputDirectory": "storybook-static",
  "excludeFiles": "middleware.ts"
}

• buildCommand：指定Vercel构建时执行Storybook打包命令（确保package.json中有对应脚本，如"build-storybook": "storybook build"）
• outputDirectory：指向Storybook打包后的静态文件目录
• excludeFiles：排除middleware.ts，避免Vercel将其识别为Edge Function处理

同时在Vercel项目设置 -> 构建与开发设置中，将框架预设改为Static，确保按静态站点部署。

方案2：临时移除/重命名middleware.ts #

若仅需临时部署Storybook，可直接将middleware.ts重命名为middleware.backup.ts，或注释所有代码。这样Vercel不会检测到Edge Function文件，避免触发模块不支持错误。

方案3：修正Clerk authMiddleware的兼容问题 #

若需保留middleware同时部署Storybook，可调整Clerk导入方式与代码，适配Edge Runtime：

修改middleware.ts内容：

import { authMiddleware } from '@clerk/nextjs/server';
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export default authMiddleware({
  afterAuth(auth, req: NextRequest) {
    // 处理未认证用户逻辑
    if (!auth.userId && !auth.isPublicRoute) {
      const signInUrl = new URL('/sign-in', req.url);
      return NextResponse.redirect(signInUrl);
    }
  },
});

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

• 改用@clerk/nextjs/server的authMiddleware，这是为Edge环境优化的版本
• 移除NextFetchEvent参数，最新版Clerk的afterAuth回调已不再需要该参数
• 去掉//@ts-ignore，确保类型定义正常

方案4：清理pnpm缓存重新安装依赖 #

pnpm缓存可能导致依赖版本异常，执行以下命令清理后重新构建：

pnpm store prune
pnpm install
pnpm run build-storybook

完成后推送代码到Vercel重新部署。

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