Question 173210 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    I was building an app with NextAuth recently and as I recall they still suggest you using ‘pages’ folder to handle all api requests. So you can try to:

    1. create pages/api/auth folder in src directory
    2. create file called […nextauth].ts inside of it
    3. create a file that would hold authOptions somewhere in your project, for example in features/lib
    4. export your options from this file:
    export const authOptions: AuthOptions = {...}

    and import them in your route to consume:

    export default NextAuth(authOptions);

    Alternatively, you can configure your Next project to forget about TS errros when building as noted here: link

    module.exports = {
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
}

    Cheers!

    Login or Signup to reply.
  2. 0

    i think the problem is your imports try this :

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

export const authOptions: NextAuthOptions = {
    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}

    so that mean change AuthOption to NextAuthOptions and import NextAuth from "next-auth/next";

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search