Next.js项目安装SwiperJs后导入Pagination模块失败求助

问题根源 #

Swiper从v9版本开始调整了模块导出结构，取消了swiper/modules这个导出路径，你用的旧导入方式已经不兼容新版本，这就是触发"Module not found: Package path ./modules is not exported from package"错误的原因。

修复方案 #

1. 修改模块导入路径 #

把原来的模块导入代码：

import { Pagination } from "swiper/modules";

改成直接从swiper根包导入：

import { Pagination } from "swiper";

2. 补充必要样式导入 #

Swiper的分页器等组件需要对应样式才能正常显示，在组件顶部加上样式导入：

// 基础样式+分页器样式
import "swiper/css";
import "swiper/css/pagination";

3. 确认组件配置无误 #

你的Swiper组件配置本身没问题，不过可以简化pagination属性写法（如果不需要自定义配置，直接设为true即可）：

<Swiper pagination={true} modules={[Pagination]} className="mySwiper">
  {media?.map((media, idx) => (
    <SwiperSlide key={idx}>
      <Image
        className="rounded-lg"
        src={media?.url}
        alt="variant Media"
        width={50}
        height={30}
      />
    </SwiperSlide>
  ))}
</Swiper>

额外排查选项 #

• 如果你非要用旧的导入逻辑，只能降级到Swiper v8.x版本：

  npm install swiper@8.x --save
  

  但不建议这么做，旧版本不再更新维护，适配新版本更稳妥。
• 清理依赖缓存重新安装，避免残留问题：

  rm -rf node_modules package-lock.json
  npm install
  

内容的提问来源于stack exchange，提问作者Ellis Otoo