인프런 커뮤니티 질문&답변
작성한 질문수
Nuxt 에 babel polyfill 적용하는 방법이 궁금합니다.
작성
·
2.8K
0
덕분에 Nuxt 로 어찌어찌 프로젝트 막바지까지 왔습니다.
그런데, IE11 에서 테스트 해보니 몇몇 컴포넌트들이 아예 화면에 표시되지 않네요.
안나오는 컴포넌트들의 공통점이 주로 transform 을 이용하는 종류가 많은것 같습니다.
vue js 용 fullpage js, swiper js, 직접 구현한 내비게이션, 카카오지도 및 카카오 주소 등 이네요.
IE11 콘솔에 "polyfill-eventsource added missing EventSource to window"
이라는 메시지가 뜨고 그 아래 줄에는
SCRIPT1002: 구문 오류 라고 표시됩니다.
그래서 여기저기 검색해보니 babel polyfill 을 적용하면 된다는것 같아서
이것저것 찾아봤는데 Nuxt 에서 명확하게 적용하는 방법을 못찾겠습니다.
그냥 vue-cli 에 적용하는건 몇 개 보이는데 이걸 어떻게 Nuxt에 적용할지
이리저리 해봤는데 안되네요.;;;
특히나 뭘 설치해야 하고, nuxt.config.js 에는 어떻게 적용해야 하는지...
오늘 하루종일 이 문제로 헤메다가 다시 제로초님께 도움을 청하게 됐습니다^^;;;
감사합니다.
답변 5
1
에러 메시지에 코드 줄수를 클릭해서 어떤 모듈이 최신문법인지 확인해보세요. 그 모듈을 nuxt.config.js에서
build: {
transfile: [모듈]
}
에 넣으세요. 그래야 그 모듈이 babel 트랜스파일됩니다.
0
이건 어쩔 수가 없습니다. includes가 ie11에서 지원되지 않는 문법이라서 어떤 라이브러리가 그걸 쓰는지 확인하고, 그걸 바벨 목록에 넣어야 합니다. 기본적으로 바벨은 node_modules 안의 라이브러리를 트랜스파일하지 않습니다. 왜냐면 이미 바벨 처리되었을거라고 가정해서요. 그런데 일부 라이브러리는 ie11을 지원 안 해서 최신문법으로 적고 바벨도 안 돌립니다. 그런 게 문제가 돼서 저희가 찾아서 직접 목록에 넣어야 합니다.
0
답변주신 내용 참고해서 이리저리 해보다보니 IE11에서 store.js 파일에서 아래와 같은 에러가 발생고 여전히 몇몇 컴포넌트들이 표시되지 않습니다.
SCRIPT438: 개체가 'includes' 속성이나 메서드를 지원하지 않습니다.
nuxt.config.js 파일에 build 항목을 다음과 같이 설정하고,
의존성은 아래처럼 설치했습니다.
혹시나 제가 뭘 빠트린게 있을까요?
아니면 다른 파일들에서 추가적으로 해주어야 하는 일이 있는건가요?
주말에 질문드려서 죄송합니다.
편안한 주말되세요^^
0
0
늦은 시간에 답변 감사합니다!
답변보고 이것저것 해봤는데 정확히는 알 수 없지만 아무래도 짐작하기로 Promise가 문제인것 같은데
npm install es6-promise
설치하고 nuxt.config.js 파일에
bulid: {
transfile: ['es-promise']
}
처리했는데 빌드 100%쯤 되서 IE에서 'Promise'가 정의되지 않았습니다. 라는 에러가 발생하네요.
혹시 뭘 더 추가해 주어야 하는게 있을까요?