Issue: I used Clerk middleware, but it didn't work, and I encountered a Maximum Call Stack Error. Additionally, my middleware.ts file sometimes doesn’t compile.

Here’s my middleware.ts file:

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
import { NextRequest } from 'next/server';

const isPublicRoute = createRouteMatcher([
    '/sign-in(.*)',
    '/sign-up(.*)',
    '/search',
    '/api/webhooks(.*)',
    '/:username',
    '/api/uploadthing',
    '/(.*)',
]);

export default clerkMiddleware(async (auth, request: NextRequest) => {
    if (!isPublicRoute(request)) {
        const authObject = await auth(); // Await auth to get the auth object
        await authObject.protect(); // Now protect() is accessible
    }
});

export const config = {
    matcher: [
        '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
        '/(api|trpc)(.*)',
    ],
};