Next.js Discord

Discord Forum

Middleware broken out of no where ?

Unanswered
Gadwall posted this in #help-forum
Open in Discord
GadwallOP
All i did was npm update this morning and havent touched anything my code is same as the one deployed but now when i try to deploy latest it gives error

71 Replies

Plott Hound
Which packages were updated when you did npm update
GadwallOP
Failed to compile.

./middleware.ts:15:21
Type error: No overload matches this call.
Overload 1 of 4, '(args_0: GetServerSidePropsContext): Promise<Session | null>', gave the following error.
Argument of type '(req: NextAuthRequest) => Response | null' is not assignable to parameter of type 'GetServerSidePropsContext'.
Overload 2 of 4, '(args_0: (req: NextAuthRequest) => void | Response | Promise<void | Response>): AppRouteHandlerFn', gave the following error.
Argument of type '(req: NextAuthRequest) => Response | null' is not assignable to parameter of type '(req: NextAuthRequest) => void | Response | Promise<void | Response>'.
Type 'Response | null' is not assignable to type 'void | Response | Promise<void | Response>'.
Type 'null' is not assignable to type 'void | Response | Promise<void | Response>'.

13 | const { auth } = NextAuth(authConfig)
14 |
15 | export default auth((req) => {
| ^
16 | const { nextUrl } = req
17 | const isLoggedIn = !!req.auth
18 |

Error: Command "npx prisma generate && next build" exited with 1
@Plott Hound Which packages were updated when you did npm update
GadwallOP
i just did npm update, let me grab my old package.json and new
{
  "name": "reptracker",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth/prisma-adapter": "^1.0.17",
    "@hookform/resolvers": "^3.3.4",
    "@prisma/client": "^5.8.1",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@types/bcryptjs": "^2.4.6",
    "@types/next-auth": "^3.15.0",
    "bcryptjs": "^2.4.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.3.1",
    "next": "14.1.0",
    "next-auth": "^5.0.0-beta.5",
    "next-themes": "^0.2.1",
    "nodemailer": "^6.9.8",
    "react": "^18",
    "react-day-picker": "^8.10.0",
    "react-dom": "^18",
    "react-hook-form": "^7.49.3",
    "react-icons": "^5.0.1",
    "react-spinners": "^0.13.8",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^9.0.1",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/nodemailer": "^6.4.14",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/uuid": "^9.0.8",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "prisma": "^5.8.1",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}
new^
{
  "name": "reptracker",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth/prisma-adapter": "^1.0.17",
    "@hookform/resolvers": "^3.3.4",
    "@prisma/client": "^5.8.1",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@types/bcryptjs": "^2.4.6",
    "@types/next-auth": "^3.15.0",
    "bcryptjs": "^2.4.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "next": "14.1.0",
    "next-auth": "^5.0.0-beta.5",
    "next-themes": "^0.2.1",
    "nodemailer": "^6.9.8",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.49.3",
    "react-icons": "^5.0.1",
    "react-spinners": "^0.13.8",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^9.0.1",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/nodemailer": "^6.4.14",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/uuid": "^9.0.8",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "prisma": "^5.8.1",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}
old^
Plott Hound
this doesn't tell me much as i cant see what changed. but if i were to guess i'd say prisma 5.9^ is the culprit since it also broke my build
i went through and fixed the types but if you want to roll back you can change:
"@prisma/client": "5.8.1", and
"prisma": "5.8.1"

taking out the ^ will make it use a specific version
GadwallOP
@Gadwall
mihir
@Plott Hound no cause in npm run dev there is no issues
but it does have issues when i build it
aswell as now it has red lines / error in the file
import NextAuth from "next-auth"

import authConfig from "@/auth.config"

import {
    DEFAULT_LOGIN_REDIRECT,
    apiAuthPrefix,
    authRoutes,
    publicRoutes,
    blogPrefix
} from "@/routes"

const { auth } = NextAuth(authConfig)

export default auth((req) => {
    const { nextUrl } = req
    const isLoggedIn = !!req.auth

    const isApiAuthRoute = nextUrl.pathname.startsWith(apiAuthPrefix)
    const isBlogRoute = nextUrl.pathname.startsWith(blogPrefix)
    const isPublicRoute = publicRoutes.includes(nextUrl.pathname)
    const isAuthRoute = authRoutes.includes(nextUrl.pathname)

    if (isApiAuthRoute) return null
    if (isBlogRoute) return null

    if (isAuthRoute) {
        if (isLoggedIn) {
            return Response.redirect(new URL(DEFAULT_LOGIN_REDIRECT, nextUrl))
        }
        return null
    }

    if (!isLoggedIn && !isPublicRoute) {
        return Response.redirect(new URL("/auth/login", nextUrl))
    }
    return null
})

// Optionally, don't invoke Middleware on some paths
export const config = {
    matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
}
(req) => {
the red line part^
@mihir but it does have issues when i build it
Plott Hound
thats pretty common with type errors. what are the errors exactly?
mihir
No overload matches this call.
  Overload 1 of 4, '(args_0: GetServerSidePropsContext): Promise<Session | null>', gave the following error.
    Argument of type '(req: NextAuthRequest) => Response | null' is not assignable to parameter of type 'GetServerSidePropsContext'.
  Overload 2 of 4, '(args_0: (req: NextAuthRequest) => void | Response | Promise<void | Response>): AppRouteHandlerFn', gave the following error.
    Argument of type '(req: NextAuthRequest) => Response | null' is not assignable to parameter of type '(req: NextAuthRequest) => void | Response | Promise<void | Response>'.
      Type 'Response | null' is not assignable to type 'void | Response | Promise<void | Response>'.
        Type 'null' is not assignable to type 'void | Response | Promise<void | Response>'.ts(2769)
Parameter 'req' implicitly has an 'any' type.ts(7006)
(parameter) req: NextAuthRequest
Plott Hound
which version of next auth are you using?
beta 5?
mihir
yes
Plott Hound
i tried it and im not getting type errors
mihir
could it be typescript ?
Plott Hound
but im using app router and looks like you're using pages
its definitelty a typescript error
mihir
I am using app router broo
but it thinkks i am using pages cuz it says serverSideProps and stuff
Plott Hound
ok this made me think otherwise GetServerSidePropsContext
mihir
yeah
how do i fix that
is it in next config ?
Plott Hound
does changing this fix anything? export default auth((req: any) => {
mihir
noo
i used github copilot to try 50 diff things
@mihir is it in next config ?
Plott Hound
nah it should just use app as long as you dont have a pages folder
show me auth.config.ts
mihir
import type { NextAuthConfig } from "next-auth"
import Credentials from "next-auth/providers/credentials"
import Github from "next-auth/providers/github"
import Google from "next-auth/providers/google"
import bcrypt from "bcryptjs"

import { LoginSchema } from "@/schemas"
import { getUserByEmail } from "./data/user"

export default {
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    Github({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
    Credentials({
      async authorize(credentials) {
        const validatedFields = LoginSchema.safeParse(credentials)

        if (validatedFields.success) {
          const { email, password } = validatedFields.data

          const user = await getUserByEmail(email)
          if (!user || !user.password) return null

          const passwordsMatch = await bcrypt.compare(password, user.password)

          if (passwordsMatch) {
            return user
          }
        }
        return null
      }
    })],
} satisfies NextAuthConfig
no errors here
Plott Hound
hmm. is the repo public? if i can download it and try it locally i might be able to help but its hard rn becuase the errors are weird
mihir
its not public but should i delete redownload it myself in another location and try npm run build
or delete node modules and npm run dev
Plott Hound
yeah give that a try
mihir
yep something is wrong
i redownloaded my repo
and npm i and npx prisma generate && npm run build
it still gives same error
mihir
@Plott Hound
what is your @auth/core version
in package-lock
Plott Hound
"next-auth": "^5.0.0-beta.4",
mihir
not thatt
node_modules/@auth/core

in package-lock
Plott Hound
"node_modules/@auth/core": {
"version": "0.24.0",
"resolved": "https://registry.npmjs.org/@auth/core/-/core-0.24.0.tgz",
"dependencies": {
"@panva/hkdf": "^1.1.1",
"@types/cookie": "0.6.0",
"cookie": "0.6.0",
"jose": "^5.1.3",
"oauth4webapi": "^2.4.0",
"preact": "10.11.3",
"preact-render-to-string": "5.2.3"
},
"peerDependencies": {
"nodemailer": "^6.8.0"
},
"peerDependenciesMeta": {
"nodemailer": {
"optional": true
}
}
},
mihir
yeah so mine was on 0.23.0 and it was updated to 0.26.2
so i got my old package.json and package-lock.json and installed the other dependencies
i guess npm update is a scary command
🥳 FIXED IT
YAYY
Plott Hound
nice work!
Eastern Phoebe
Hi all 👋 I've got the same error and also ran npm update sadly it didnt fix the problem.

Package.json:
{
  "name": "aruah-jetzt",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth/prisma-adapter": "^1.3.3",
    "@hookform/resolvers": "^3.3.4",
    "@prisma/client": "^5.9.1",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@types/bcrypt": "^5.0.2",
    "@types/bcryptjs": "^2.4.6",
    "bcryptjs": "^2.4.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "lucide-react": "^0.323.0",
    "next": "14.1.0",
    "next-auth": "^5.0.0-beta.9",
    "next-themes": "^0.2.1",
    "prisma": "^5.9.1",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.50.1",
    "react-hot-toast": "^2.4.1",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "tsx": "^4.7.0",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}


package-lock.json
    "node_modules/@auth/core": {
      "version": "0.26.3",
download the package.json and package-lock.json
then run npm i
it should fix it
@mihir go to your old github when the code was working
Eastern Phoebe
it worked after updating the return null statements in my middleware to return NextResponse.next()
mihir
show code ?
its prob bugged that version
but good that it works
Eastern Phoebe
import NextAuth from "next-auth";
import { NextResponse } from "next/server";
import { authConfig } from "./lib/auth.config";
import {
DEFAULT_LOGIN_REDIRECT,
apiAuthPrefix,
authRoutes,
protectedRoute,
} from "./routes";

const { auth } = NextAuth(authConfig);

export default auth((req) => {
const { nextUrl } = req;
const isLoggedIn = !!req.auth;

const isApiAuthRoute = nextUrl.pathname.startsWith(apiAuthPrefix);
const isProtectedRoute = protectedRoute.includes(nextUrl.pathname);
const isAuthRoute = authRoutes.includes(nextUrl.pathname);

if (isApiAuthRoute) {
return NextResponse.next();
}

if (isAuthRoute) {
if (isLoggedIn) {
return Response.redirect(new URL(DEFAULT_LOGIN_REDIRECT, nextUrl));
}
return NextResponse.next();
}

if (!isLoggedIn && isProtectedRoute) {
let callbackUrl = nextUrl.pathname;
if (nextUrl.search) {
callbackUrl += nextUrl.search;
}

const encodedCallbackUrl = encodeURIComponent(callbackUrl);

return Response.redirect(
new URL(/login?callbackUrl=${encodedCallbackUrl}, nextUrl)
);
}

return NextResponse.next();
});

export const config = {
matcher: ["/((?!.+\.[\w]+$|_next).)", "/", "/(api|trpc)(.)"],
};