Why does the deployment expect NextRequest | Request instead of NextResponse while on local it got the same output and ran just fine

Type error: Route "src/app/api/auth/signup/route.ts" has an invalid "POST" export:
Type "NextResponse<unknown>" is not a valid type for the function's first argument.
Expected "NextRequest | Request", got "NextResponse<unknown>".

This is my authOptions file

import User from "@/app/lib/models/User";
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";
export const authOptions = {
   providers: [
     CredentialsProvider({
       name: "Credentials",
       credentials: {
         email: { label: "Email", type: "email" },
         password: { label: "Password", type: "password" },
       },
       async authorize(credentials) {
         const { email, password } = credentials;
         try {
           const user = await User.findOne({ email });
           if (!user) {
             return null;
           }
            // Compare password before destructuring
           const passwordMatch = await bcrypt.compare(password, user.password);
           if (!passwordMatch) {
             return null;
           }
            // Exclude password from the user object after successful comparison
           const { password: _, ...userWithoutPassword } = user.toObject();
           return userWithoutPassword; // Return user data without password
         } catch (error) {
           console.log(error);
           return null;
         }
       },
     }),
   ],
  
   callbacks: {
     async jwt({ token, user }) {
       if (user) {
         token.user = user;
       }
       return token;
     },
    
     async session({ session, token }) {
       if (token.user) {
         // Pass the user data (without password) into the session
         session.user = token.user;
       }
       return session;
     },
   },
    pages: {
     signIn: "/register",
     error: "/auth/error",
   },
  
   session: {
     strategy: "jwt",
   },
    secret: process.env.NEXTAUTH_SECRET,
 };

This is my route.ts file

import { authOptions } from "@/utils/authOptions";
import NextAuth from "next-auth";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };
  

I’m fairly new to using nextjs and deploying so I don’t quite understand why local enviornment wouldn’t have an issue with it while the production enviornment does. I’ve tried looking into environment variables thinking that may be the issue but it wasn’t. I’ve also tried looking online to see if there was any other similar issues but got no luck from that. I’ve looked through the documentation to see how it works and I feel like it follows the pattern, and it’s unclear what I’m doing wrong. I’m hosting on vercel or aws both don’t work.