Edge Function middleware is referencing unsupported modules

Question

Im trying to deploy a storybook on vercel and get the following message error:

the project uses pnpm as package manager. Ive upgraded the last version of NextJs and Clerk, as well as downgrade NextJs, but the build is still crashing.

I found this thread unsupported modules, I tried all the paths discussed there, but I'm still having the same issue.

This is my middleware.ts file:

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

export default authMiddleware({
  //@ts-ignore
  afterAuth(auth, req: NextRequest, evt: NextFetchEvent) {
    // handle users who aren't authenticated
    if (!auth.userId && !auth.isPublicRoute) {
      const signInUrl = new URL('/sign-in', req.url);
      // signInUrl.searchParams.set('redirect_url', req.url);
      return NextResponse.redirect(signInUrl);
    }
  },
});

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

I played with framework presets at vercel too.

I changed NextJs to Storybook, but no luck :(

I hope sb can provide a workaround or nice solution. :)

Answer 1

I got the same issue and found something in GitHub

Go to your Project Settings > Build & Development Settings, change the framework presets from Others to Next.js, and do a new deployment to work!

Answer 2

Downgrade nextjs version to 13.4.3

I had similar error about unsupported modules in middeleware.ts file. Downgrading the nextjs version worked for me.