brcrypt is not working properly with Next.js 14.0

36 Views Asked by At

So, I am trying to implement Infinite scrolling for listing posts. Thhat implies that I have to use client component with the use client directive.

However, I get the error:

Module parse failed: Unexpected token (1:0)

This error is related to brcrypt. It is being used in an api route handler (for getting current user from Next-Auth). But since that the React component making that API call is being rendered in the new client component where Infinite scrolling logic resides. I have tried every possible way.

The only solution left is using something other than Bcrypt that can be executed through a client component. What do you suggest? Because Nextjs hasn't still provided a solution for this issue:

References: https://github.com/kelektiv/node.bcrypt.js/issues/979

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

Here's the code for the Infinite scroll component for reference:

    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;

The API call is made in the PostListItem component. The user is being fetched inside the API route handler. Nextjs version: 14.0 "bcrypt": "^5.1.1", "next-auth": "^4.23.1",

0

There are 0 best solutions below