Question

未找到模块：无法解析“swiper/react”

2021-09-16

81925

reactjs swiper.js

我在使用最新版本的 Swiper 时也遇到了同样的问题。它在我的上一个项目上可以正常工作，但现在无法正常工作。甚至那个版本也不行。我也尝试了最新版本。

这是我的代码。

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";

const App = () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log("slide change")}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

export default App;

每当我运行我的代码时，它都会显示“未找到模块：无法解析‘swiper/react’”。

Answer 1

swiper 版本 7 仅在您拥有纯 ESM 时才有效。如果没有，您必须降级到版本 6.8.4

npm:

npm install [email protected]

yarn:

yarn add [email protected]

然后添加如下结构：

import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'

<Swiper
      spaceBetween={50}
      slidesPerView={3}
      centeredSlides
      onSlideChange={() => console.log("slide change")}
      onSwiper={swiper => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>

版本 6.8.4 文档位于此处

Answer 2

Create React App 尚不支持纯 ESM 包。仍然可以使用 Swiper (7.2.0+)。

在这种情况下，我们需要使用直接文件导入

// Core modules imports are same as usual
import { Navigation, Pagination } from 'swiper';
// Direct React component imports
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';

// Styles must use direct files imports
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module

来源：Swiper 文档 | https://swiperjs.com/react#usage-with-create-react-app

Answer 3

swiper 模块中没有索引文件。因此只需更改导入路径即可

 import { Swiper, SwiperSlide } from 'swiper/react`'; 

 to

 import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';