카테고리 없음

linux ubuntu server에서 swiper가 돌지 않는다...

devWarrior 2022. 5. 14. 18:00

window 환경 vscode 에서는 react component에서 swiper를 사용했을 때 swiper.css와 그외 다른 파일을 import하는데 문제 없었지만 code를 linux ubuntu server에 올렸을 때 문제가 생겼다..

 

아래와 같은 현상이 었다. 

--> https://github.com/nolimits4web/swiper/issues/4871

 

⚠️ Swiper7/8: "Module not found: Can't resolve 'swiper/react' (vue/svelte/...)" · Issue #4871 · nolimits4web/swiper

If you have such issue with Swiper 7, it means your bundler/environment/framework/tooling doesn't support ESM packages. You should update your bundler/environment/framework/tooling or stay on S...

github.com

위 홈페이지에서 말한다 

If you have such issue with Swiper 7, it means your bundler/environment/framework/tooling doesn't support ESM packages. You should update your bundler/environment/framework/tooling or stay on Swiper 6.

--> 번들이 ESM packages 를 지원하지 않는다고 ...  guide 또한 나와있었지만 버전을 다운그레이드 해서 사용해보기로 하였다.

 

 

 

 

그래서 에러를 잡기위해 인터넷을 찾았더니 swiper 를 6.8.0 으로 다운한다음 아래와 같은 코드를 사용하라 했다.

css나 js 번들을 import하는 경로가 상위 버전과 조금 달랐다. 

 

 

위 코드를 사용할 경우 pagination을 제외하고는 모두 제대로 작동했다 ... 

pagination에 관련된 css를 찾아야 될 듯 싶다..

 

 

swiper library 는 스와이프 기능을 할 수 있는 ui component를 제공한다 

https://swiperjs.com/

 

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

 

공식사이트 https://swiperjs.com/demos 를 통해 원하는 prototype을 가져다 사용할 수 있다.

 

그런데