Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following:
-  clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware.
- Your Middleware matcher is configured to match this route or page.
- If you are using the src directory, make sure the Middleware file is inside of it.

I get this error only when i attempt to deploy to vercel, not when I run it on localhost. All of my env variables are in vercel so that is not the issue. The following is more information on my code:

middleware.js:

import { clerkMiddleware } from '@clerk/nextjs/server'

export default clerkMiddleware()

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

.env.local:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=blahblahblah
CLERK_SECRET_KEY=blahblahblah
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_API_URL = http://localhost:3000
NEXT_PUBLIC_CLERK_FRONTEND_API=https://api.clerk.dev
STRIPE_SUCCESS_URL=/success
STRIPE_CANCEL_URL=/cancel
STRIPE_WEBHOOK_SECRET = blahblahblah
STRIPE_SECRET_KEY = blahblahblah

File Structure: