未捕获的语法错误：预期表达式，得到'<' while using Next.js middleware

Question

如果使用 Spotify 的 API 没有可用令牌，我正在使用 Next.js 中间件重定向到登录页面，

我的中间件看起来像这样：

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

export async function middleware(req: NextRequest) {
  //   const token = await getToken({ req, secret: process.env.JWT_SECRET });
  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET });
  const { pathname, origin } = req.nextUrl;
  if (pathname.includes("/api/auth") || token) {
    return NextResponse.next();
  }
  //   console.log(origin);
  // console.log(token);

  if (!token && pathname != "/login") {
    return NextResponse.redirect(new URL(`${origin}/login`));
  }
}

如果我注释掉这一部分：

  if (!token && pathname != "/login") {
    return NextResponse.redirect(`${origin}/login`);
  }

我不再收到错误，但显然，如果没有令牌，我需要此行进行重定向，我尝试检查是否有任何语法错误或任何错误，但我自己似乎找不到它，有什么帮助吗？

我遇到的错误是这些：

Uncaught SyntaxError: expected expression, got '<'
react-refresh.js:1
Uncaught SyntaxError: expected expression, got '<'
webpack.js:1
Uncaught SyntaxError: expected expression, got '<'
main.js:1
Uncaught SyntaxError: expected expression, got '<'
_app.js:1
Uncaught SyntaxError: expected expression, got '<'
login.js:1
Uncaught SyntaxError: expected expression, got '<'
_buildManifest.js:1
Uncaught SyntaxError: expected expression, got '<'

Answer 1

我遇到了同样的问题，对我有用的解决方案是

export const config = {
matcher: "/",
};

将此代码添加到您的 middleware.ts 文件中，这将解决问题:)

Answer 2

问题是 Next.js 正在向

/_next/*

发出一些请求，并且您将请求重定向到登录页面，这些请求是需要的，但从未完成。

您需要避免将任何请求重定向到 /_next/*

export const config = {
  matcher: [
    '/((?!_next|api/auth).*)(.+)'
  ],
}

Answer 3

我有同样的问题，这几乎解决了我的问题：

export const config = {
   matcher: '/',
};

我认为这是最新的 Next JS 版本附带的错误，上面的解决方案有帮助。另外降级到 Next JS 和 React 的另一个版本应该可以解决这个问题。

Answer 4

看起来这是 Next.js 最近出现的问题，希望他们能够修复它。

请参阅：https://github.com/vercel/next.js/issues/38934#issuecomment-1193083803这似乎与您面临的问题相同。

同时，请尝试降级 Next.js 和 React.js 看看是否有帮助。

Answer 5

显然，这并不理想，但只是一个临时解决方案。因此，由于某种原因，当请求以 /_next 开头的文件并且您有重定向登录时，它会将重定向的文件发送到 /_next 文件。作为临时修复，您需要过滤掉此文件请求。我正在使用 next.js 12.3.1，这对我有用。

在这种情况下，如果用户会话没有 user 属性，它会将用户重定向到登录屏幕，而不会出现错误。

    if (
        !session.hasOwnProperty("user") &&
        url != '/_next/static/development/_ssgManifest.js' &&
        url != '/_next/static/development/_buildManifest.js' &&
        url != '/_next/static/chunks/pages/_app.js' &&
        url != '/_next/static/chunks/react-refresh.js' &&
        url != '/_next/static/chunks/main.js' &&
        url != '/_next/static/chunks/webpack.js' &&
        url != '/_next/static/chunks/pages/login.js' &&
        url != '/manifest.json'
    ) {
        
        return NextResponse.redirect(new URL('/login', req.url))
      
    }

完整的中间件文件

import { NextResponse } from "next/server"
import type { NextRequest } from "next/server";
import { getIronSession } from "iron-session/edge";

export async function middleware(req: NextRequest) {
    const url = req.nextUrl.pathname;    

    if (url.startsWith('/login') || url.startsWith('/api/login')) {        
        return NextResponse.next()
    }

    const res = NextResponse.next();
    const session = await getIronSession(req, res, {
        password: process.env.SECRET_COOKIE_PASSWORD,
        cookieName: "cookie"
    });

    // User session does not exist or it has expired
    if (
        !session.hasOwnProperty("user") &&
        url != '/_next/static/development/_ssgManifest.js' &&
        url != '/_next/static/development/_buildManifest.js' &&
        url != '/_next/static/chunks/pages/_app.js' &&
        url != '/_next/static/chunks/react-refresh.js' &&
        url != '/_next/static/chunks/main.js' &&
        url != '/_next/static/chunks/webpack.js' &&
        url != '/_next/static/chunks/pages/login.js' &&
        url != '/manifest.json'
    ) {        
        return NextResponse.redirect(new URL('/login', req.url))
    }

    return NextResponse.next()
}

希望接下来的js团队解决这个问题