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