vue에서 node_modules모듈 babel 문제해결

Problem

Google Analytics를 보는데, 어느 순간 부터 인터넷 익스플로러의 활성사용자수가 0임을 확인하였다. (망할 IE...) 알고보니 우리가 Vue에서 Google Tag Manager를 사용하기 위해 vue-gtm이라는 라이브러리를 쓰고 있는데 해당 라이브러리의 익스플로러 지원이 안됐던 것이다. vue-cli에서 기본 적으로 babel을 활용하여 코드를 IE에서도 사용할 수 있게 트랜스파일 해주지만, node_modules에 속해 있던 라이브러리는 해주지 않아 생기는 문제이다. (안해주는게 효율면에서 낫기도 하다.)

How I Solved

• transpileDependencies 옵션을 활용해 node_modules에 속해있는 라이브러리도 babel을 적용할 수 있다는 것을 알게 되었다. (참고)

• vue.config.js에 transpileDependencies: ["vue-gtm"] 추가

module.exports = {
... (생략)
transpileDependencies: ["vue-gtm"]
};

• 잘 되는듯 했으나, 다음과 같은 에러 발생

# 빌드될때...
export 'default' (imported as '__vue_script__') was not found...

# 브라우저에서
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>

• 이 답변이 많은 도움이 되었다. babel이 js코드를 트랜스파일할 때, commonjs를 사용할 수도 있고 ES를 사용할 수도 있는데 vue-cli의 기본 디폴트는 ES. 하지만, vue-gtm은 commonjs를 사용하여 트랜스파일 되어있었다. commonjs로 트랜스파일 되어 있는 코드를 ES로 트랜스파일할 때 문제가 발생하는 듯하다.

• babel.config.js를 다음과 같이 설정하여 해결하였다. vue-cli에서 commonjs를 사용하여 트랜스파일하도록 설정하였다.

// babel.config.js
module.exports = {
presets: [
  ["@vue/app", {
    modules: "commonjs"
  }]
]
};

What I Learned

• 새로운 라이브러리를 사용할 때 꼭 익스플로러 환경을 체크해봐야한다는 교훈을 얻었다.

도움이 되셨다면 1초만 시간을 내셔서 하단의 '광고 클릭' 해주시면 감사하겠습니다. 블로그 운영에 큰 힘이됩니다.