@supabase/ssr causing ReferenceError: __dirname is not defined in Next.js's middleware

[meetyan]

Bug report

• [*] I confirm this is a bug with Supabase, not with my own application.
• [*] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

I am using Next.js 14.1.0 and encounter an issue with @supabase/ssr complaining ReferenceError: __dirname with middle.ts on deploment.

When I follow the article about using @supabase/ssr, everything works fine. However, after I deploy the app to Vercel, it says the app has crashed and ReferenceError: __dirname is not defined in the log.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Install Next.js 14
2. yarn add @supabase/supabase-js @supabase/ssr
3. Follow this article https://supabase.com/docs/guides/auth/server-side/nextjs
4. Copy and paste the code from middleware section (step 4)
5. Everything works fine except deployment on Vercel (the app crashed)
6. Check the log and you'll see the error

Expected behavior

Deployment on Vercel works fine without crashes.

Screenshots

System information

• OS: macOS 14.0
• Browser: chrome
• Version of supabase-js: latest version
• Version of Node.js: v18

Additional context

Add any other context about the problem here.

[meetyan]

Okay, after hours of searching, it is resolved by changing Project Settings in Vercel to Next.js. Vercel's default settings is Other.