Clerk authMiddleware throwing errors with publicRoutes when signed out

Question

I began learning the T3 stack following this tutorial: https://www.youtube.com/watch?v=YkOSUVzOAA4&t=1836s

I have middleware thats supposed to send users to a sign in page when they're logged out. I'm using Clerk for this. I wanted to have the index be a public route so that it doesnt require a sign in. I was following the Clerk documentation for this in my middleware.ts file. Here's the code for that.

import { authMiddleware } from "@clerk/nextjs";
export default authMiddleware({
  // "/" will be accessible to all users
  publicRoutes: ["/"]
});
 
export const config = {
      matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

Screenshot of error message

This problem only exists when the user is signed out. If I'm signed in and then I click sign out, the error shows up. Its the publicRoutes property that is causing this error. If I comment it out then I dont get any errors but the problem is that I cant use the index page without signing in.

What should I do?