javascript - Slider does not work in react-slick with typescript - Stack Overflow

admin管理员组

文章数量:1336632

I am using the typescript version (@types/react-slick) of the react-slick library to implement carousel/slider in a Nextjs project. I am getting the following error after importing the Slider ponent from the package:

Here is the exact error message that is displayed when "Slider" is hovered on:

'Slider' cannot be used as a JSX ponent.
  Its instance type 'Slider' is not a valid JSX element.
    The types returned by 'render()' are inpatible 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 is below is a carousel ponent I wish to create that will slide images and texts:

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>
  );
}

I am using the typescript version (@types/react-slick) of the react-slick library to implement carousel/slider in a Nextjs project. I am getting the following error after importing the Slider ponent from the package:

Here is the exact error message that is displayed when "Slider" is hovered on:

'Slider' cannot be used as a JSX ponent.
  Its instance type 'Slider' is not a valid JSX element.
    The types returned by 'render()' are inpatible 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 is below is a carousel ponent I wish to create that will slide images and texts:

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>
  );
}

• javascript
• css
• reactjs
• typescript
• carousel

Share Improve this question Follow edited Jun 18, 2023 at 21:02 Bello Shehu asked Jun 17, 2023 at 22:39 Bello ShehuBello Shehu 34544 silver badges88 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

In my case, the root problem was having some dependencies that listed "@types/react": "*" in their dependencies. This causes multiple versions of the React type definitions to appear in node_modules, which results in XX cannot be used as a JSX ponent. errors from Typescript. There is a lengthy discussion of the issue and what should be done about it for library maintainers on GitHub.

The workaround for me (yarn v2) was to run

yarn dedupe '@types/react'

See the GitHub above for work arounds for other package managers.

you're going to want to use a react "ref" like this:

const sliderRef = React.useRef<Slider>(null);

And then pass that into your slider ponent like this:

<Slider ref={sliderRef} {...settings}>
   {items.map((item => RENDER_YOUR_ITEM_HERE))}
</Slider>

I updated react & react-dom.

For npm

npm i react@18 react-dom@18 @types/react@18 @types/react-dom@18

For yarn

yarn add react@18 react-dom@18 @types/react@18 @types/react-dom@18

I had the same problem. After I deleted my yarn.lock and my node_modules folder and reinstalled everything, the error no longer occurred.

For a quick solution I just wrote Slider into a variable with any type here is an example:

import Slider from "react-slick";

const SliderCustom: any = Slider;

const SomeComp = () => {
  return (
    <SliderCustom {...settings}>
      ....
   </SliderCustom>
  )
}

本文标签： javascriptSlider does not work in reactslick with typescriptStack Overflow