Swiper中引入Pagination组件失败，提示未找到对应导出项

你遇到的问题核心是Swiper版本差异导致的模块导入路径变更：

• 旧版Swiper（6.x及更早）支持直接从swiper根模块导入Pagination
• 7.x及以上版本重构了模块结构，必须从指定子路径导入对应组件

解决步骤： #

1. 确认当前Swiper版本
   执行命令查看版本：

   npm list swiper
   # 或 yarn 用户执行：
   yarn list swiper
   

2. 修正导入语句
   若版本为7.x+，将导入路径改为子模块：

   import { Pagination } from 'swiper/modules/pagination';
   

3. 正确注册模块
   初始化Swiper时，务必将Pagination加入模块注册列表：

   import { Swiper } from 'swiper';
   import { Pagination } from 'swiper/modules/pagination';
   
   // 注册分页模块
   Swiper.use([Pagination]);
   
   // 初始化配置
   const swiper = new Swiper('.swiper-container', {
     pagination: {
       el: '.swiper-pagination',
       // 可添加其他分页配置，比如clickable: true
     }
   });
   

4. React项目适配（swiper-react）
   若使用React版本的Swiper，除了修正导入，还要引入对应样式：

   import { Swiper, SwiperSlide } from 'swiper/react';
   import { Pagination } from 'swiper/modules/pagination';
   
   // 导入基础样式和分页样式
   import 'swiper/css';
   import 'swiper/css/pagination';
   
   // 组件内使用
   function MySwiper() {
     return (
       <Swiper 
         modules={[Pagination]} 
         pagination={{ clickable: true }}
       >
         <SwiperSlide>内容1</SwiperSlide>
         <SwiperSlide>内容2</SwiperSlide>
       </Swiper>
     );
   }
   

你看到的旧文章能用，是因为它们基于Swiper 6及更早版本，当时的模块结构还未调整。新版本为了优化打包体积，采用了按需导入的子模块设计。

内容的提问来源于stack exchange，提问作者Lakshay Rohilla