My Next Js app isn't building and returing a type error, how do I fix?

Question

My NextJS 13 app isn't building and is returning a type error but it is completely working on development environment

the type error is shown in this file

import NextAuth, { AuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google"

export const authOptions: AuthOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_ID as string,
            clientSecret: process.env.GOOGLE_SECRET as string,
        }),
    ],
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST}

the file path is app/api/auth/[...nextauth]/route.ts

This is the error message shown in the console ⬇️

.next/types/app/api/auth/[...nextauth]/route.ts:8:13
Type error: Type 'OmitWithTag<typeof import("D:/4 - Coding/Training/NextAuth/next-auth-new/app/api/auth/[...nextauth]/route"), "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | ... 9 more ... | "PATCH", "">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'authOptions' is incompatible with index signature.
    Type 'AuthOptions' is not assignable to type 'never'.

   6 |
   7 | // Check that the entry is a valid entry
>  8 | checkFields<Diff<{
     |             ^
   9 |   GET?: Function
  10 |   HEAD?: Function
  11 |   OPTIONS?: Function
- info Linting and checking validity of types ...

I don't know where to start since I'm new to the NextJs front , tried to google the error but it isn't returning any relevant answers, bard AI is no help also

Answer 1

For me, the problem came from export const authOptions is in the route.ts

import NextAuth, { AuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google"

/* You shouldn't export authOptions in API route.ts / route.js file.
 This is the cause of error!! */

export const authOptions: AuthOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_ID as string,
            clientSecret: process.env.GOOGLE_SECRET as string,
        }),
    ],
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST}

Just seperate authOptions file and then import the authOptions to your [...nextauth]/route.ts.

See also: https://nextjs.org/docs/app/building-your-application/routing/router-handlers#supported-http-methods (you are only allowed to export HTTP Methods)

Answer 2

This worked for me!

Move the authOptions in a different folder

import { AuthOptions } from "next-auth";
import GoogleProvider from 'next-auth/providers/google';

export const authOptions: AuthOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_ID as string,
            clientSecret: process.env.GOOGLE_SECRET as string,
        }),
    ],
}

And import into the route.ts

import { authOptions } from '@/lib/authOptions';

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST}

This is because you are only allowed to export HTTP Methods (GET, HEAD, POST, PUT, DELETE, etc). If an unsupported method is called, Next.js will return an error. Link to the documentation.