vuejs + vuetify + vue-cli IE 브라우저 적용기(삽질기)

vuejs + vuetify + vue-cli ie 적용기 (a.k.a 삽질)

vuejs + vuetify 환경으로 열심히 크롬에서 개발을 하고 있었다.
개발 초기에 한번 ie에서도 뜨는지 확인 했을 때는 화면이
정상적으로 뜨는 것을 발견하고 그 뒤로 확인을 안 했다고 한다..

어느날 갑자기 개발을 하다가 ie에서 확인을 해봤는데
? ? ?? 공포의 빈 "blank" 화면이 반겨주었다.

간략하게 제가 해결한 방법을 공유함으로 누군가는 ie를 덜(?) 싫어할 수 있도록
글을 써보겠습니다.

1. babel.config.js 적용

vue-cli 공식문서(아래 링크 참조)를 보면
Polyfill 설정 방법이 설명되어있다.
@vue/babel-preset-app 라이브러리를 이용하여 polyfill
설정을 한다.

// babel.config.js

module.exports = {
  presets: [
    '@vue/app',
  ],
}

useBuiltIns, polyfills 옵션은 필요에 따라 추가하면 된다.
추가하지 않는 경우 기본값이 적용된다.

useBuiltIns는 기본값이 usage이며 이를 권장하고있다.
polyfills의 기본값은 ['es.array.iterator', 'es.promise', 'es.object.assign', 'es.promise.finally']이다.

추가적으로 필요한 polyfill은 공식문서를 참조한다.

참고로 필자는 라이브러리 프로젝트를 생성하여, 메인 프로젝트에서 import 해서
사용하는 경우가 있는데 라이브러리 프로젝트에서는 아래와 같이 설정한다.

// babel.config.js

module.exports = {
  presets: [
    ['@vue/app', {
      useBuiltIns: false,
    }]
  ]
}

Library나 Web Components의 경우는 useBuiltIns 옵션을
false로 할 것을 권장한다.

[참고] vue-cli polyfills

2. fetch polyfill 추가

1번까지 하면 잘 될줄 알았다. 하지만 아니었다.
graphql 관련 Vue Apollo Client 라이브러리를 사용하는데
ie에서 fetch polyfill 오류가 발생하였다! 그나마 다행히도 ie가 친절하게 fetch 오류 단어를 알려줬다.

해결법은 간단히 fetch polyfill을 설치한다.

npm i whatwg-fetch

// main.js

import 'whatwg-fetch'

설치 후 main.js 최상단에 import 한다.

[참고] npm whatwg-fetch

3. vue.config.js

2번 작업을 통해서 잘 동작할 줄 알았는데 그게 아니었다.
여전히 ie의 개발자도구는 알 수 없는 오류만 뱉어댔다.

다시 vue-cli 문서를 찬찬히 읽어보았다.

If the dependency is written in an ES version that your target environments do not support: Add that dependency to the transpileDependencies option in vue.config.js. This would enable both syntax transforms and usage-based polyfill detection for that dependency.

현재 내 환경에서 지원하지 않는 ES 버전으로 작성된 dependency가 있는 경우vue.config.js 파일에 transpileDependencies 옵션을 추가하라고한다.

transpileDependencies 옵션은 babel이 node_modules 안에
있는 파일은 무시하는데 transpile 하기를 원하면 옵션에 적어주면 된다는 의미이다.

// vue.config.js

transpileDependencies: [
  'vuetify',
  'vuetify-dialog',
],

위와 같이 vue.config.js 옵션에 필요한 dependency들을 추가한다.

4. vue-cli 버전 문제

다행히도 3번까지 했을 때 모든 문제가 해결했지만
나의 경우는 특수하게 또 다른 문제가 발생했다.

위에서 언급했듯이 라이브러리 프로젝트를 생성 후
모듈처럼 import 해서 사용중인데 문제가 발생했다.

라이브러리 프로젝트를 1개만 import 했을 경우 정상적으로 동작하지만 프로젝트가 2개 이상인 경우 ie stack 공간 부족 문제 발생!!!

결론적으론 @vue/cli-service의 버전에 종속되어있는
@soda/get-current-script의 버전 v1.0.0의 버그였다.

@vue/cli 관련 라이브러리 버전을 upgrade 했더니
문제를 해결했다.

ie는 stackoverflow!!!!!만 뱉을뿐 그 외 아무말이 없었다.
이게 vue-cli 문제일줄이야?
ie 설정하는 시간의 절반 이상이 4번 문제 때문이었다. 이럴 때는 참 힘든 것 같다.
ie가 더욱 싫어지는 순간이었다.

[참고] vue-cli issue

---

ie 지원이 불가피한 환경이라면 library 하나를 추가하게 되면
무조건 ie부터 확인하자! 라는 교훈을 얻었다.