Getting 'failed to resolve import "slick-carousel/slick/slick.css" and import "slick-carousel/slick/slick-theme.css"' error

Question

I am using react-slick carousel with Vite. When I import the CSS files shown here, I am getting an error:

Failed to resolve import "slick-carousel/slick/slick.css" and import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

This is my code:

import React, { Component } from "react";
import Slider from "react-slick";
import Images from "../../../../assets/images/Images";

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

// IMAGES DATA FOR CAROUSEL
interface Data {
  imgSrc: string;
}

const data: Data[] = [
  {
    imgSrc: Images.Airbnb,
  },
  {
    imgSrc: Images.Fedex,
  },
  {
    imgSrc: Images.Google,
  },
  {
    imgSrc: Images.Hubspot,
  },
  {
    imgSrc: Images.Microsoft,
  },
  {
    imgSrc: Images.Walmart,
  },
  {
    imgSrc: Images.Airbnb,
  },
  {
    imgSrc: Images.Fedex,
  },
];

// CAROUSEL SETTINGS
export default class CompanyCarasouls extends Component {
  render() {
    const settings = {
      dots: false,
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 1,
      arrows: false,
      autoplay: true,
      speed: 2000,
      autoplaySpeed: 2000,
      cssEase: "linear",
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
          },
        },
        {
          breakpoint: 700,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
          },
        },
        {
          breakpoint: 500,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
          },
        },
      ],
    };

    return (
      <div
        style={{ textAlign: "center", marginTop: "20px", marginBottom: "20px" }}
      >
        <div
          className="mx-auto max-w-4xl px-4 sm:px-6 lg:max-w-7xl lg:px-8"
          style={{ margin: "auto", width: "100%" }}
        >
          <h2 className="text-midnightblue text-2xl font-semibold">
            Trusted by companies of all sizes
          </h2>
          <div className="py-14">
            <Slider {...settings}>
              {data.map((item, i) => (
                <div key={i}>
                  <img
                    src={item.imgSrc}
                    alt={item.imgSrc}
                    width={116}
                    height={36}
                  />
                </div>
              ))}
            </Slider>
          </div>
          <hr />
        </div>
      </div>
    );
  }
}

Answer 1

Make sure you have installed the slick-carousel library itself, alongside react-slick, which is a wrapper:

npm install slick-carousel react-slick