React TS中SwiperJS v10.1.0的FreeMode与Pagination功能失效问题

• 修正模块导入路径
  Swiper v10起，模块不再从swiper/modules导入，而是直接从主包swiper引入。替换你的导入代码：

// 错误导入
// import { FreeMode, Pagination } from 'swiper/modules';

// 正确导入
import { Swiper, SwiperSlide } from 'swiper/react';
import { FreeMode, Pagination } from 'swiper';

之后在Swiper组件的modules属性中传入这两个模块：modules={[FreeMode, Pagination]}

• 解决类型不兼容问题
  确保配置项符合Swiper官方的类型定义，比如freeMode可传入布尔值或配置对象，pagination传入包含对应属性的对象。示例配置：

<Swiper
  freeMode={{ enabled: true, momentumBounce: true }}
  pagination={{ clickable: true, dynamicBullets: true }}
  modules={[FreeMode, Pagination]}
  spaceBetween={15}
>
  {/* SwiperSlide内容 */}
</Swiper>

注意：Swiper v10自带类型声明，无需额外安装@types/swiper，如果之前安装了可以卸载避免冲突。

• 重新安装依赖（可选）
  如果导入或类型问题仍存在，先清理旧依赖再重新安装指定版本：

npm uninstall swiper @types/swiper
npm install swiper@10.1.0

• 完整可运行示例

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { FreeMode, Pagination } from 'swiper';

// 必须导入对应模块的样式，否则功能显示异常
import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/pagination';

const CustomSwiper = () => {
  return (
    <div style={{ width: '80%', margin: '0 auto' }}>
      <Swiper
        freeMode={{ enabled: true }}
        pagination={{ clickable: true }}
        modules={[FreeMode, Pagination]}
        slidesPerView={3}
        spaceBetween={20}
      >
        <SwiperSlide style={{ height: '200px', background: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Slide 1</SwiperSlide>
        <SwiperSlide style={{ height: '200px', background: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Slide 2</SwiperSlide>
        <SwiperSlide style={{ height: '200px', background: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Slide 3</SwiperSlide>
        <SwiperSlide style={{ height: '200px', background: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Slide 4</SwiperSlide>
        <SwiperSlide style={{ height: '200px', background: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Slide 5</SwiperSlide>
      </Swiper>
    </div>
  );
};

export default CustomSwiper;

内容的提问来源于stack exchange，提问作者Eileen Balaguer