SwiperJS v7.0.2 React引入报Can't resolve 'swiper/react'错误如何解决？

• Swiper v7.0.2属于v7的早期迭代版本，其package.json文件未正确配置子模块导出规则，导致webpack等打包工具无法识别swiper/react这类简化导入路径
• 手动补全组件的完整导入路径后，Swiper内部源码仍依赖简化路径做依赖引入，因此会触发内部文件的依赖找不到报错

方案1：升级Swiper版本（推荐） #

直接将Swiper升级到v7.4.0及以上的v7稳定版，该版本后官方已修复导出配置问题，可直接使用标准导入规则：

// 导入核心组件
import { Swiper, SwiperSlide } from 'swiper/react';
// 导入基础样式
import 'swiper/css';
// 按需导入对应功能的样式，例如分页、导航模块
import 'swiper/css/pagination';
import 'swiper/css/navigation';

方案2：必须保留v7.0.2版本的处理方式 #

需要在打包工具中配置路径别名，以原生webpack配置为例：

const path = require('path');

module.exports = {
  // 其余配置保持不变
  resolve: {
    alias: {
      'swiper': path.resolve(__dirname, 'node_modules/swiper/'),
      'swiper/react': path.resolve(__dirname, 'node_modules/swiper/react/swiper-react.js')
    }
  }
}

如果使用未eject的Create React App项目，可通过craco、react-app-rewired等工具修改上述别名配置，配置完成后即可正常使用简化导入语法。

内容的提问来源于stack exchange，提问作者Tharindu Gimras