Programmiererforum

'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

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 (


{items.map((item, index) => (


{item.message}

))}


);
}

Ich verwende die Typoskript-Version (@types/react-slick) der React-Slick-Bibliothek, um Karussell/Slider in einem Nextjs-Projekt zu implementieren. Nach dem Importieren der Slider-Komponente aus dem Paket erhalte ich die folgende Fehlermeldung:
[img]https://i.sstatic.net/6laWT .png[/img]

Hier ist die genaue Fehlermeldung, die angezeigt wird, wenn Sie mit der Maus über „Slider“ fahren:
[code]'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
[/code]
Der folgende Code ist eine Karussellkomponente, die ich erstellen möchte und die Bilder und Texte verschiebt:
SlickCarousel.tsx
[code]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 (


{items.map((item, index) => (


{item.message}

))}


);
}

[/code]