[Javascript] IE11 에서 SCRIPT10002 와 SCRIPT10009 콘솔 오류 발생하는 문제 해결

 

 

최근 Vue 프레임워크로 매니저 사이트를 개발 후 크롬과 사파리에서 테스트 진행 후 IE11 에서 최종 확인을 하였는데, 화면 자체가 뜨지 않는 문제가 발생하였습니다. 요소 검사를 띄워 확인해보니

다음과 같은 'SCRIPT1002' 오류가 발생하였습니다.

[IE11 에서 발생하는 SCRIPT1002 오류]

 

문법오류가 있으면 실행이 안되었어야 할텐데 크롬은 정상적으로 동작이 되고 있다는 것을 확인하였기에, 끊임없는 삽질만 반복하고 있었습니다.

 그러던 중 babel targets 에 browserlists 에 "ie 11" 를 추가하려는데 babel config 가 없다는 것을 발견하였습니다. package.json 에는 babel 에 대한 library 가 import 되어있었다고 생각해서 고려를 안했는데 babelrc 파일이 존재하지 않아서 발생한 문제였습니다.

다음과 같은 위치에 .babelrc 파일을 추가해줍니다.

 

 

 

그 후 다음과 같은 내용을 추가해줍니다.

 {
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

 

 

여기서 babel 이란  
  - ES6+ 문법을 ES5 이하로 트랜스파일링 해줍니다.
  - 크롬같은 경우는 브라우저 내에 ES6 엔진을 내장하고 있기 떄문에 특정 문제 없이 동작합니다.
  - 하지만, IE 나 구형 브라우저같은 경우는 별도의 엔진을 내장하고 있지 않기 때문에 구문 오류가 발생할 수 있습니다.

babel 설치하는 방법

 

이렇게 babel 을 구성 후 문제가 없을거라 생각하고 띄웠는데, 이번엔 'SCRIPT1009' 오류가 발생하였습니다.

여기서도 하루종일 삽질하던 중, IE 에서는 Vuex 를 지원하지 않다는 것과 Vuex-persist 의 상위 버전에서는 IE 가 지원하지 않는다는 것을 알게되었습니다.

 

이와 같은 문제를 해결하기 위해 다음과 같이 진행하였습니다.

 module.export 설정에 다음과 같이 transpileDependencies 를 추가해줍니다.

[index.js 의 module.exports 에 transpileDependencies 를 추가]

 

 그 후 package.json 에 vuex-persist 버전을 1.8 로 낮춰줍니다.

[vuex-persist 의 버전을 낮춤]

     

 "rm -r node_modules" 진행하여 모듈 삭제 후 "npm i" 로 npm 을 install 하여 재 설정 해줍니다.

 

그 후 npm 을 빌드하고 다시 띄우면 IE 에서 문제없이 동작하는 걸 확인하실 수 있습니다.

 

 

참고 사이트

https://github.com/championswimmer/vuex-persist/issues/73
IE vue 설정 방법