brcrypt 无法与 Next.js 14.0 正常工作

Question

所以，我正在尝试为列表帖子实现无限滚动。这意味着我必须将客户端组件与 use client 指令一起使用。

但是，我收到错误：

模块解析失败：意外的标记（1:0）

此错误与 brcrypt 有关。它被用在 api 路由处理程序中（用于从 Next-Auth 获取当前用户）。但由于进行该 API 调用的 React 组件正在无限滚动逻辑所在的新客户端组件中呈现。 我已经尝试了所有可能的方法。

剩下的唯一解决方案是使用 Bcrypt 以外的可以通过客户端组件执行的东西。你有什么建议？因为Nextjs还没有提供这个问题的解决方案：

参考资料： https://github.com/kelektiv/node.bcrypt.js/issues/979

https://github.com/vercel/next.js/issues/46493

这里是无限滚动组件的代码供参考：

    const InfiniteScrollPosts = ({
 userId,
 searchString,
 category,
 initialPosts,
}: InfiniteScrollPostsProps) => {
 const [posts, setPosts] = useState(initialPosts);
 const [page, setPage] = useState(1);
 const [ref, inView] = useInView();

 const loadMorePosts = async () => {
 const next = page + 1;
 const posts = await useGetPosts(
 userId,
 searchString,
 category,
 page
    );
 if (posts?.data?.length) {
 setPage(next);
 setPosts((prev) => [
 ...(prev?.length ? prev : []),
 ...posts?.data,
      ]);
    }
  };

 useEffect(() => {
 if (inView) {
 loadMorePosts();
    }
  }, [inView]);

 return (
 <section>
 {questions?.length > 0 && (
 <div className="flex flex-col gap-4">
 {posts?.map((post) => {
 return (
 <PostListItem key={post?.id} postData={post} />
            );
          })}
 </div>
      )}
 {/* loading spinner */}
 <div ref={ref}>
 <Loader />
 </div>
 </section>
  );
};

export default InfiniteScrollPosts;

API 调用是在 PostListItem 组件中进行的。正在 API 路由处理程序内获取用户。 Nextjs 版本：14.0 "bcrypt": "^5.1.1", “下一个验证”：“^4.23.1”，

Answer 1

好吧，我遇到了同样的问题，我通过安装 bcryptjs 而不是 bcrypt 解决了它。

因此，首先通过运行

npm install bcryptjs

安装 bcryptjs，然后将

const bcrypt = require('bcrypt')

更改为

const bcrypt = require('bcryptjs')