-
[2021.03.23] 라이브러리 모듈 단에서 ES5 에러 발생시 확인할 요소개발 블로깅/Modern script 2021. 3. 23. 07:28
프로젝트 내에서 로그 수집을 위해 fireBase 라이브러리를 이용 중이다. 그런데 해당 라이브러리를 거쳐서 요청된 API 쪽에서 아래와 같은 에러가 발생하는 것이었다.
Object.values is not a functionObject.values는 자바스크립트 공식 함수이며 ES6부터 사용할 수 있는 명령어임으로 ES5환경에서는 지원이 되지 않는다. 그런데 이게 라이브러리 단에서 이러한 에러가 발생하니 어떻게 조치를 해야할지 몰랐었다.
그러나 알고보니 방법은 굉장히 간단했다.
해결 방법
해당 fireBase를 이용하기 위해서 코드 내에 Account Set을 하는 부분이 있다.
import * as firebase from 'firebase'; let database; let config = { apiKey: "XXX", authDomain: "XXX", databaseURL: "XXX", projectId: "XXX", storageBucket: "XXX", messagingSenderId: "XXX", } export const fire = () => { firebase.initializeApp(config); database = firebase.database() }일반 공식 함수에서도 이처럼 JS 파일 내에서 Set을 하도록 제일 앞단에 명시되어 있다.
그런데, 내가 접한 레포에는 HTML 단에서 명시를 해주고 있던 것이었다.
<html> <head> <script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-analytics.js"></script> <script> var firebaseConfig = { apiKey: "XXX", authDomain: "XXX", databaseURL: "XXX", projectId: "XXX", storageBucket: "XXX", messagingSenderId: "XXX", } // Initialize Firebase window.firebase.initializeApp(firebaseConfig); window.firebase.analytics(); </script> </head> <body> <div id="root"></div> </body> </html>HTML 단에서 script 태그로 firebase 관련 JS를 요청해서 가져오니 ES6 명령어가 에러가 날 수 밖에 없었던 것이다.
그래서 ES5 환경의 HTML 단에서가 아닌, JS 파일 내 ES6 이상의 환경에서 fireBase를 import해서 사용하면 된다.다른 모듈들도 라이브러리 단에서 ES5 에러가 발생한다면, HTML 단에서 해당 라이브러리를 요청해서 사용하고 있지는 않은지 확인해보면 좋을 것 같다.
반응형'개발 블로깅 > Modern script' 카테고리의 다른 글
[2019.11.17] ES2019(ES10) 새로운 기능을 습득하자~! (0) 2019.11.17 [2019.05.28] TypeScript 사용법 (TypeScript+Express 구현) (3) 2019.05.28 [2019.04.26] 자바스크립트의 비동기 특징과 비동기 방식을 다루는 법 (0) 2019.04.26 [2019.04.22] WebPack 사용법 #4 - babel 세팅 (0) 2019.04.22 [2019.04.21] Webpack 사용법 #3 - 브라우저 자동 동기화 browser-sync (0) 2019.04.22