Why swiper is not working in my react-vite-ts app?

Question

I tried to use Swiper in my React-TS project. Unfortunately, it shows this error: SyntaxError: The requested module '/node_modules/.vite/deps/swiper.js?t=1708357087313&v=044557b7' does not provide an export named 'Autoplay' (at Projects.tsx:1:75)

I tried different approaches, but none can be helpful. I tried module as well in component. BUt id doesn't work. When I delete the { Navigation, Autoplay, EffectCoverflow } then my code run perfectly. I don't know why this happen. I workes with Swiper a loot. But never get any error like this. Am looking for solid solution here. Here is my code:

import SwiperCore, { Navigation, Autoplay, EffectCoverflow } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react"; 

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/effect-coverflow";
import { BiLeftArrow, BiRightArrow } from "react-icons/bi";


    const slideImage = [
  {
    url: "https://img.freepik.com/free-vector/organizing-projects-concept-illustration_114360-542.jpg",
  },
  {
    url: "https://img.freepik.com/free-vector/organizing-projects-concept-illustration_114360-542.jpg",
  },
  {
    url: "https://img.freepik.com/free-vector/organizing-projects-concept-illustration_114360-542.jpg",
  },
  {
    url: "https://img.freepik.com/free-vector/organizing-projects-concept-illustration_114360-542.jpg",
  } 
];



// Install Swiper modules
SwiperCore.use([Autoplay, Navigation, EffectCoverflow]);

function Projects() {
  return (
    <section className="h-[875px] w-[100%] flex flex-col m-auto justify-center md:items-center gap-20 mx-auto bg-white-white">
      <div className="flex flex-wrap md:flex-nowrap lg:flex-nowrap xl:flex-nowrap 2xl:flex-nowrap justify-start md:justify-between lg:justify-between xl:justify-between 2xl:justify-between md:w-[800px] xl:w-[1140px] lg:w-[1140px] 2xl:w-[1140px] items-center mx-auto">
        <div>
          <p className="text-xl font-semibold leading-[45px] text-primary-600 text-left px-5  md:px-0 lg:px-0 xl:px-0 2xl:px-0">
            Portfolio
          </p>
          <h2 className="text-[40px] font-semibold leading-[50px] text-black-600 mt-[10px] text-left px-5 md:px-0 lg:px-0 xl:px-0 2xl:px-0">
            Recent Projects
          </h2>
        </div>
        <div className="flex justify-center pr-3 md:pr-none lg:pr-none xl:pr-none 2xl:pr-none ml-auto md:ml-0 lg:ml-0 xl:ml-0 2xl:ml-0 gap-5 mt-10">
          <button className="button-prev-slide cursor-pointer w-[50px] h-[50px] flex justify-center items-center text-primary-600 hover:bg-primary-600 hover:text-white-white border-2 border-primary-600 rounded-full p-0 m-0">
            <BiLeftArrow />
          </button>
          <button className="button-next-slide  cursor-pointer w-[50px] h-[50px] flex justify-center items-center text-primary-600 hover:bg-primary-600 hover:text-white-white border-2 border-primary-600 rounded-full p-0 m-0">
            <BiRightArrow />
          </button>
        </div>
      </div>
      <div className="md:w-[819px] lg:w-[1138px] xl:w-[1138px] 2xl:w-[1138px] w-full h-[450px] flex justify-center items-center mx-auto">
        <Swiper
          effect={"coverflow"}
          grabCursor={true}
          coverflowEffect={{
            rotate: 0,
            stretch: 0,
            depth: 100,
            modifier: 2,
            slideShadows: true,
          }}
          breakpoints={{
            640: {
              slidesPerView: 1,
            },
            768: {
              slidesPerView: 3,
            },
            1024: {
              slidesPerView: 3,
            },
          }}
          navigation={{
            nextEl: ".button-next-slide",
            prevEl: ".button-prev-slide",
          }}
          autoplay={{
            delay: 2500,
            disableOnInteraction: false,
          }}
          loop={true}
          //   modules={[Autoplay, EffectCoverflow, Navigation] as  SwiperComponent}
          className="mySwiper"
        >
          {slideImage.map((sI, i) => (
            <SwiperSlide
              key={i}
              className="mr-0 flex justify-center items-center "
            >
              <div className="swiper-img shadow-md">
                <img src={sI.url} alt="rating-star" />
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </section>
  );
}

export default Projects;

My swiper version is "11.0.6", Thanks in advance guys.

Answer 1

Swiper React docs:

By default Swiper React uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and other modules, you have to install them first.

Seems you need to import the modules from swiper/modules and pass them to the component as props per the documentation:

// Import from swiper/modules
import { Navigation, Autoplay, EffectCoverflow } from "swiper/modules";

import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/effect-coverflow";

function Projects() {
  return (
    <Swiper
      // install Swiper modules
      modules={[Autoplay, EffectCoverflow, Navigation]}
    >
      {slideImage.map((sI, i) => (
        <SwiperSlide
          key={i}
          className="mr-0 flex justify-center items-center"
        >
          <div className="swiper-img shadow-md">
            <img src={sI.url} alt="rating-star" />
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}