Next.js 14+NextAuth首次加载报错：意外令牌导致崩溃

问题描述 #

在Next.js 14项目中，首次渲染时会出现Uncaught SyntaxError: Invalid or unexpected token (layout.js:137)错误，刷新页面后可正常运行。本地示例代码极少复现该问题，但生产环境每次首次加载都会触发。

相关代码与配置 #

package.json #

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "13",
    "next-auth": "^4.24.5",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

layout.tsx #

import { Inter } from "next/font/google";
import "./globals.css";
import SessionWrapper from "./components/SessionWrapper";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <SessionWrapper>
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    </SessionWrapper>
  );
}

page.tsx #

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      Main page
    </main>
  );
}

SessionWrapper.tsx #

"use client";
import { SessionProvider } from "next-auth/react";

import React from "react";

const SessionWrapper = ({ children }: { children: React.ReactNode }) => {
  return <SessionProvider>{children}</SessionProvider>;
};

export default SessionWrapper;

api/auth/[...nextauth]/route.ts #

import KeycloakProvider from "next-auth/providers/keycloak";

import NextAuth from "next-auth";

const handler = NextAuth({
  providers: [
    KeycloakProvider({
      clientId: "my id",
      clientSecret: "my secret",
      issuer: "my app",
    }),
  ],
});

export { handler as GET, handler as POST };

预期行为 #

应用首次加载无错误，可正常渲染页面。

补充信息 #

移除Tailwind相关配置（如globals.css或postcss.config.js中的Tailwind设置）后，问题似乎得到解决，但无法100%确定，且不清楚底层原因。身份验证Provider基于Next.js 14 + NextAuth的认证指南实现。

解决方案 #

1. 统一Next.js依赖版本 #

当前package.json中next版本为13，但eslint-config-next为14.0.4，版本不匹配可能导致构建时语法转换异常。执行以下命令升级next到对应版本：

npm install next@14.0.4

2. 修正RootLayout结构 #

Next.js App Router要求<html>和<body>必须是RootLayout的直接子元素，客户端组件不能包裹在这些标签外层。修改layout.tsx：

import { Inter } from "next/font/google";
import "./globals.css";
import SessionWrapper from "./components/SessionWrapper";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <SessionWrapper>{children}</SessionWrapper>
      </body>
    </html>
  );
}

这种结构错误可能导致服务端渲染与客户端hydration不匹配，进而引发语法错误。

3. 检查Tailwind配置有效性 #

确保tailwind.config.js中正确配置了App Router的文件路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

错误的content配置可能导致Tailwind生成无效代码，触发语法错误。

4. 清理生产构建缓存 #

旧的构建缓存可能导致异常，执行以下命令清理后重新构建：

rm -rf .next
npm run build

内容的提问来源于stack exchange，提问作者Ben Rodgers