Next.js 14客户端组件中bcrypt与Next-Auth遇意外令牌错误求助

错误信息 #

Module parse failed: Unexpected token (1:0)

./node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
Module parse failed: Unexpected token (1:0)

场景说明 #

有一个实现无限滚动的客户端组件，内部渲染PostListItem Server组件；该Server组件通过getCurrentUser检查登录用户，getCurrentUser依赖Next-Auth的getServerSession及prismadb。渲染时触发上述错误。

相关代码片段 #

客户端组件渲染Server组件 #

{posts?.map((post) => {
  return (
    <PostListItem key={question?.id} postData={post} />
)}

Server组件（PostListItem） #

const PostListItem: React.FC<PostListItemProps> = async ({
  postData,
}) => {
  const currentUser = await getCurrentUser();
  // 其余代码
}

getCurrentUser函数 #

import { getServerSession } from "next-auth/next";
import { options } from "@/app/api/auth/[...nextauth]/options";
import prismadb from "../prismadb";

export async function getSession() {
  return await getServerSession(options);
}

export async function getCurrentUser() {
  try {
    const session = await getSession();

    if (!session?.user?.email) {
      return null;
    }

    const currentUser = await prismadb.user.findUnique({
      where: {
        email: session.user.email as string,
      },
      // 其余代码
    });
  } catch (error) {
    return null;
  }
}

核心原因 #

Server组件依赖的服务端专属代码（比如bcrypt、getServerSession）被客户端打包流程捕获了——Next.js 14的App Router中，客户端组件直接渲染Server组件时，若Server组件的依赖未被正确隔离，会导致服务端模块被混入客户端打包，触发解析错误。

步骤1：用server-only隔离服务端代码 #

这是官方推荐的服务端/客户端代码隔离方案，能防止服务端代码被意外导入到客户端：

1. 安装依赖：

npm install server-only

2. 在所有服务端专属文件顶部添加导入：
   • 在getCurrentUser.ts顶部：

     import 'server-only';
     

   • 在app/api/auth/[...nextauth]/options.ts顶部：

     import 'server-only';
     

步骤2：确保Server组件未被标记为客户端组件 #

检查PostListItem组件文件，确保没有添加'use client'指令——该组件是纯Server组件，必须在服务端运行。

步骤3：正确处理bcrypt/bcryptjs #

如果你的Next-Auth配置中用到了bcrypt（比如密码验证）：

• 替换为bcryptjs（避免node-pre-gyp相关的编译问题），并且确保bcryptjs的调用只出现在加了server-only标记的服务端文件中，绝对不要在客户端代码中导入或使用它。

步骤4：移除无效的next.config.js配置 #

之前添加的config.externals = [...config.externals, "bcrypt"];配置在App Router中无效，反而可能干扰打包流程，直接删除该配置。

步骤5：检查客户端组件的导入 #

确保你的客户端组件没有直接导入getCurrentUser、options等服务端专属模块——所有需要用户信息的逻辑都应该放在Server组件或Server Action中，客户端组件只负责渲染和交互。

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