I encountered an issue while trying to implement a carousel/slider using the typescript version of the react-slick library in my Nextjs project. After importing the Slider component from the package, I received the following error:
https://i.sstatic.net/6laWT.png
When hovering over "Slider," this is the exact error message that appears:
'Slider' cannot be used as a JSX component.
Its instance type 'Slider' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("c:/Users/bello/node_modules/@types/react/ts5.0/index").ReactNode'.
Type 'PromiseLikeOfReactNode' is not assignable to type 'ReactNode'.ts(2786)
(alias) class Slider
import Slider
The code provided below shows the carousel component I am attempting to create for sliding images and text:
SlickCarousel.tsx
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { agentReviewListType } from "../_models/props";
import Image from "next/image";
export default function SlickCarousel({
items,
}: {
items: agentReviewListType;
}) {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
};
return (
<section>
<Slider {...settings}>
{items.map((item, index) => (
<article key={index}>
<Image src={item.image} alt="image" />
<p>{item.message}</p>
</article>
))}
</Slider>
</section>
);
}