[리액트/React] Module not found: Can't resolve 'swiper/react' (Swiper 안될때)

yarn으로 swiper를 설치하고

yarn add swiper

 

swiper를 불러왔는데

import { Swiper } from 'swiper/react';​

 

swiper가 안 불러와지고 아래와 같은 에러가 발생했다

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

 

---

1. 원인

현재 Swiper의 가장 최신 버전은 v8.1.6이고
공식 문서를 살펴보니 CRA는 아직 pure ESM을 지원하지 않고 v7.2.0에서 사용할 수 있다

v

2. 해결법

해결 방법에는 두 가지가 있다.

첫 번째 방법은
가장 최신 버전인 v.8.x.x을 사용하고 싶으면
Swiper를 사용할 때 직접 파일을 가져온다 

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

 

두 번째 방법은
버전을 다운그레이드 하는 것이다

yarn remove swiper // 제거
yarn add swiper@7.2.0 // 7버전대로 다시 추가

 

---

참고

Swiper React Components