vue-awesome-swiper 의 IE issue Syntax error

vue-awesome-swiper 설치 후 IE11 에서 안보이는 이슈가 발생하였다.

코드는 아래와 같이 작성하였다.

import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';

export default {
    name: 'test',
    components: {
        Swiper : Swiper,
        SwiperSlide : SwiperSlide
    },
    directives: {
        swiper: directive,
    }
    //...생략
}

 

뭐 대강 이런식으로..

그런데 확인겸 IE를 확인해보다가 구문오류 이슈를 확인한 것이다.

IE 꼭 맞춰야하나.... 내년이면 아웃인데....

찾고찾고찾고. 이것때문에 아까운 시간 낭비 ㅠㅠ 구문오류로 인한 Syntax error 였다.

 

 

정리한 바로는 이렇다.

 

외부 플러그인으로 인한 IE 구문오류가 생기면 보통은 폴리필이 잘 되었느냐이다.
아마도 IE의 구문오류라하면 곧 폴리필이 문제가 있다는 것으로 생각할 수 있다.

그래서 vue.config.js 에 아래와 같이 작성한다.

 

module.exports = {
    transpileDependencies: ['vue-daum-postcode', 'swiper', 'dom7'],
    // ... 생략
}

 

일단 다음 주소찾기 팝업도 이와같은 구문오류로 페이지가 빈페이지가 나왔는데 해당 속성에 추가해줌으로써 해결되었다.

그러나 swiper는 이렇게 호락호락하지 않지!
위에서 보기와 같이 swiper, dom7 를 추가하니까 더 상세한 오류가 떴다.

그래서 swiper를 import하는 부분을 변경하였다.

 

// 변경 후
import VueAwesomeSwiper from 'vue-awesome-swiper';
const {Swiper, SwiperSlide, directive} = VueAwesomeSwiper;

 

이후에는 정상적으로 IE도 동작하는 것을 확인하였다.

 

 

 

 

 

 

*댓글과 좋아요는 힘이 됩니다.