Build Error: The Edge Function "middleware" is referencing unsupported modules: - next: stream, fs, url, path

[JonCatmull]

I have hit this issue both when using the deploy via the Vercel dashboard from this page and also when creating it myself following this guide. The app seems to work locally but when I deploy to Vercel the build fails.

--
17:16:20.748 | Error: The Edge Function "middleware" is referencing unsupported modules:
17:16:20.748 | - next: stream, fs, url, path

There doesn't seem to be much in the middleware function so I assume it is something in the imported modules:

import { NextRequest, NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";

I'm new to Vercel/Next.js so any ideas about what is causing this would be greatly appreciated!

[JonCatmull]

OK so I have solved this, the issue is that the default project that is created in Vercel doesn't have the correct framework preset. It defaults to Other and should in fact be Next.js.

To change go to your project in the Vercel dashboard, then under settings > Build & Development Settings, you should see Framework Preset. I hope this helps anyone else.

[mouimet-infinisoft]

Thanks it helped!