Bcrypt 在 Next.js 14（客户端组件）和 Next-Auth 中出现意外令牌错误

Question

我遇到了这个问题，bcrypt 无法与 Nextjs 一起使用并给出此错误：

 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)

基本上我有一个用于无限滚动的客户端组件，在该客户端组件中，我正在渲染一个服务器组件。

现在，该服务器组件检查登录的用户。因此 Next-Auth 和 bcrypt 参与其中。但是因为服务器组件是在客户端组件内呈现的，所以我收到此错误。

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

在服务器组件中，我有这个：

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,
      },

我到处寻找解决方案。在 Next.js github 上，用户建议使用“bcryptjs”而不是“bcrypt”。我尝试过，但它也引发了不同的错误。

一些用户还建议更改 next.config.js，如下所示：

config.externals = [...config.externals, "bcrypt"];

但这也行不通。

我可以做什么来解决这种情况？

Answer 1

不幸的是，Bcrypt 永远不会与 Next 14 兼容，特别是在 SSR 系统或服务器组件上，因为它在幕后使用 Crypto，这反过来又与服务器组件不兼容。现在，在 Node 上原生工作的是 Web Crypto API，也许如果 Bcrypt 迁移到这个新 API，它就会工作。