React引入Swiper报错Module not found: Can't resolve 'swiper/react'如何解决

安全阿岳

2026-10-3

问题原因

版本不匹配导致的导出路径差异：Swiper v6及更早版本的React适配包是独立的@swiperjs/react，没有内置到主包的swiper/react子路径下，只有v7及以上版本才支持你当前写法里的导入路径。如果本地安装的是旧版本，就会触发模块找不到的报错。
依赖缓存或文件损坏：node_modules文件丢失、包管理器缓存异常都会导致正常安装的包无法被正确解析。
构建工具适配问题：部分旧版本的React构建工具（如create-react-app v4及以下）对ES模块的子路径导出规则支持不完善，无法识别Swiper package.json中声明的exports字段，也会导致解析失败。

解决步骤

首先查看本地安装的Swiper版本，执行命令：
npm list swiper
根据版本选择对应处理方案：

如果是v6及更早版本：
卸载原有包后安装适配的独立React组件包：

npm uninstall swiper
npm install swiper @swiperjs/react

同时修改你的导入代码为：

import { Swiper, SwiperSlide } from "@swiperjs/react";
import "swiper/css/swiper.css";

如果是v7及以上版本：
先清理缓存重装依赖修复文件损坏问题：

# 删除旧依赖和锁文件
rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
# 清理包管理器缓存
npm cache clean --force
# 重新安装所有依赖
npm install

重装后依然报错的话，在项目根目录的jsconfig.json（TS项目对应tsconfig.json）中添加路径映射，跳过构建工具的自动解析逻辑：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "swiper/react": ["./node_modules/swiper/react/swiper-react.js"],
      "swiper/css": ["./node_modules/swiper/swiper.min.css"]
    }
  }
}