使用Swiper实现缩略图滑块时遇导出模块未找到错误

错误原因 #

你遇到的问题是Swiper v6+版本的模块导入规则变更——从这个版本开始，FreeMode、Navigation、Thumbs这类功能模块不再直接从swiper根包导出，需要单独从swiper/modules目录导入。

修复步骤 #

1. 修正导入路径
   把你原来的导入代码：

   import { Swiper, FreeMode, Navigation, Thumbs } from 'swiper';
   

   替换成：

   // 导入Swiper核心
   import { Swiper } from 'swiper';
   // 单独导入需要的功能模块
   import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
   

2. 导入必要的样式
   别忘了导入Swiper的核心样式和模块对应的样式：

   import 'swiper/css';
   import 'swiper/css/navigation';
   import 'swiper/css/thumbs';
   

3. 初始化Swiper时配置modules数组
   在创建Swiper实例时，必须把导入的模块加入modules配置项：

   // 主滑块配置
   const mainSwiper = new Swiper('.main-swiper', {
     modules: [Navigation, Thumbs],
     navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev',
     },
     // 其他自定义配置
   });
   
   // 缩略图滑块配置
   const thumbsSwiper = new Swiper('.thumbs-swiper', {
     modules: [FreeMode],
     freeMode: true,
     slidesPerView: 4,
     // 其他自定义配置
   });
   
   // 关联主滑块与缩略图滑块
   mainSwiper.thumbs.swiper = thumbsSwiper;
   

额外提示 #

如果你安装的是旧版本Swiper，建议升级到最新稳定版：

npm install swiper@latest
# 或使用yarn
yarn add swiper@latest

调整后webpack的导出错误即可解决，你可以继续按照目标效果完成缩略图滑块的开发。

内容的提问来源于stack exchange，提问作者P2121 Anirudh