React-Vite-TS项目中Swiper无法运行：Autoplay导出错误求助

问题重现 #

运行代码时出现以下错误：

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)

删除{ Navigation, Autoplay, EffectCoverflow }的导入后代码可正常运行，但无法使用对应功能。

原因 #

Swiper 11版本对模块导入机制做了重大调整：不再从主swiper包导出各类功能模块，所有模块需要从独立的子路径导入；同时不再推荐使用SwiperCore.use()注册模块，改为直接通过Swiper组件的modules属性配置。

解决方案 #

按以下步骤修改代码：

1. 调整模块导入路径
   替换原来的主包导入方式，改为从对应子模块导入：

   // 替换这行：import SwiperCore, { Navigation, Autoplay, EffectCoverflow } from "swiper";
   import { Autoplay } from 'swiper/modules/autoplay';
   import { Navigation } from 'swiper/modules/navigation';
   import { EffectCoverflow } from 'swiper/modules/effect-coverflow';
   import { Swiper, SwiperSlide } from "swiper/react"; 
   

2. 配置Swiper组件的modules属性
   取消注释并修正Swiper组件的modules配置（无需额外类型断言）：

   <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]} // 启用这行配置
     className="mySwiper"
   >
   

3. 移除废弃的SwiperCore.use调用
   删除代码中的这行：

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

修改后的完整代码 #

import { Autoplay } from 'swiper/modules/autoplay';
import { Navigation } from 'swiper/modules/navigation';
import { EffectCoverflow } from 'swiper/modules/effect-coverflow';
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",
  } 
];


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

内容的提问来源于stack exchange，提问作者Shaker Ahamed