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

我在使用最新版本的 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’”。

swiper 版本 7 仅适用于纯 ESM。如果没有，您必须降级到版本 6.8.4

npm:

npm install [email protected] /cdn-cgi/l/email-protection

yarn:

yarn add [email protected] /cdn-cgi/l/email-protection

然后添加如下结构：

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 文档是here https://swiper6.vercel.app/swiper-api