Issue
I was using Next 14 Server Side App, when I got the following error.
Error: (0 , react_intersection_observer__WEBPACK_IMPORTED_MODULE_2__.useInView) is not a function
How do I solve this? I have added the code below.
`
import Image from "next/image";
import { useInView} from "react-intersection-observer";
function LoadMore() {
const {ref, inView } = useInView();
return (
<>
<section className = "flex justify-centre items-centre w-full">
<div >
<Image src = "./spinner.svg" alt = "spinner"
width = {56}
height = {56}
className = "object-contain"
/>
</div>
</section>
</>
);
}
export default LoadMore;
`
useInView hook; The useInView hook makes it easy to monitor the inView state of your components. Call the useInView hook with the (optional) options you need.
Solution
hooks are not allowed in server components as they run only once and don't run on the client (where hooks are supposed to be executed).useInview()
So that means we have to convert our component to a client-side component by using it as a "use client";
"use client";
import Image from "next/image";
import { useInView } from "react-intersection-observer";
The use client
directive is a React API Reference Directive. It is needed only if you’re using React Server Components or building a library compatible with them.
use client
lets you mark what code runs on the client.
You can add use client
at the top of a file to mark the module and its transitive dependencies as client code.
Answered By - Jone Smith
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.