Uncaught SyntaxError: Unexpected token '<' when matching all routes in Next.js middleware

Question

I`m trying to redirect a user to specific pages based on role, using the following code in the middleware.ts file

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { getToken } from 'next-auth/jwt'

export async function middleware(request: NextRequest) {
    const token = await getToken({
        req: request,
        secret: process.env.JWT_SECRET
    }) as any
    if (token !== null && token.user.role === "admin") {
        if (request.nextUrl.pathname.startsWith('/admin')) {
            return NextResponse.next()
        }
        else {
            return NextResponse.redirect(new URL('/admin', request.url))
        }
    }
}
/* export const config = {
    matcher: [
     //   "/login",
     //  "/register",
     //  "/",
     //   "/admin"
    ],
} */

From what I understood from the docs it will run for all the routes, but I get this error :

Uncaught SyntaxError: Unexpected token '<

However, if I include the matcher in the middleware file, it works as intended:

export const config = {
    matcher: [
       "/login",
       "/register",
       "/",
       "/admin"
    ],
}

Is there a fix for that error? Or just add all the pages to the matcher array?

Youssouf Oumar · Accepted Answer · 2023-03-18 18:22:35Z

1

When they say a middleware without a matcher runs for every request, it includes requests for getting everything, including favicons, JavaScript files, CSS files... as you can read on the doc.

You, in your if statement, you are saying, anything that does not start with '/admin", should be redirected to '/admin". So when the browser asks for those JavaScript files, you are redirecting it, which results in an HTML file being sent. This is the problem.

With the matcher, you are not blocking the browser from accessing the files that are needed to build the page, and scoping the middleware only on these paths:

export const config = {
  matcher: ["/login", "/register", "/", "/admin"],
};

edited Mar 18, 2023 at 18:22

answered Mar 18, 2023 at 9:50

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammad Over a year ago

thank you , i got the reason now behind the error , adding '/((?!api|_next/static|_next/image|favicon.ico).*)' to the matcher fixed it like from the docs .

Collectives™ on Stack Overflow

Uncaught SyntaxError: Unexpected token '<' when matching all routes in Next.js middleware

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related