reactjsswiper.jsreact-swiper

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

Swiper 7.0.5 swiper/css gives error Module not found: Can't resolve 'swiper/css'

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
function Test() {
 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 Test;
Solution

  • For swiper@7.3.1, the imports in a Create-React-App project work this way -

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



import 'swiper/swiper.min.css'
import 'swiper/modules/pagination/pagination.min.css'