[100 % Solved] Module not found: Can't resolve 'swiper/react'

Problem:

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

When we use Swiper in reactjs Application But sometimes we are facing the following error:

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.0.2

1. Uninstall swiperjs if you already added to your react project

npm uninstall swiper

2. Install Swiperjs version 6.0.2

npm install swiper@6.0.2

Thank you for reading the article. Hope this solution helped you a lot. Comment below your thoughts and your queries.