[SOLVED] Module not found: Can't resolve 'swiper/react'

Module not found: Can't resolve 'swiper/react'

I'm also having the same problem with the latest version of Swiper. It worked on my previous project but not working right now. Not even that version. Tried on the latest version too.

Here is my code.

// 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;

Whenever I run my code it says, " Module not found: Can't resolve 'swiper/react' ".

Solution

swiper version 7 only works if you have pure ESM. if not you have to downgrade to version 6.8.4

npm:

npm install swiper@6.8.4

yarn:

yarn add swiper@6.8.4

then add the structure like below:

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>

version 6.8.4 documentation is here