Firebase import error 해결방법

입사 후에 나는 Vue.js를 활용하여 날씨 api 그리고 카카오 맵 api를 활용하여 미니 웹 애플리케이션을 만들었다. 이 프로젝트를 3주 정도 붙잡고 있었는데 어찌어찌 해결하고 나니 100% 완벽하다 할 순 없겠지만, 그래도 vue.js 기초 문법 정도는 어느 정도 이해하게 되었다.

 

Firebase + Vue.js

좀 더 성장하기 위해 나는 최근 인프런에서 제공하는 firebase + Vue.js + Tailwind css를 활용하여 만든 트위터 클론 코딩 강의를 결제했다. tailwind css도 처음 사용해보는 라이브러리라 어색했지만, 생각보다 firebase를 활용하는 게 너무 어려웠다.

 

✅ Firebase Install Error

Firebase를 본격적으로 활용해보기도 전에 막혔던 건 바로 설치였다. 분명 동영상 강의 그대로 똑같이 따라 쳤는데, 영상에선 실행이 되고 내 화면에선 시뻘건 에러 창이 떴다. 가장 처음 직면했던 건 npm install firebase. 설치부터 막혔다. node.js 바탕으로 설치를 줄곧 해왔던 터라 당연히 될 줄 알았는데, 에러가 떴다.

 

✅ sudo를 붙여보자.

보통 sudo란 "substitute user do"이라 해석된다. sudo는 예전에는 "superuser do" 약자였으며 지금은 기능이 확장되었다. 보통 superuser(=root)의 (보안, 실행) 권한을 다른 사용자에게 잠깐 부여해 많은 권한이 필요한 "명령어를 실행"하는 데 사용한다. 그래서 sudo npm install firebase 이렇게 작성하고 패스워드를 입력하면 설치가 대부분 된다.

 

✅ yarn을 사용해보자.

Firebase 설치를 공식 문서 그대로 했음에도 불구하고, 또다시 에러가 난다면? 내가 그랬다. 정말 환장할 노릇이었다. 동영상 강의 그대로 복사 붙여 넣기 한 듯 동일하게 작성했음에도 불구하고, 에러가 났다. 이럴 땐, 차선책(?)이라고 하긴 그렇지만, npm install yarn을 통해 firebase를 재설치해보자. yarn으로 설치할 땐, yarn add firebase 그리고 나머지 과정은 npm 앞에 sudo를 붙여 진행해도 무방하다.

 

🔥 Firebase Import Error

npm run build 조차 터미널에서 에러가 떠서 어찌어찌 yarn build로 firebase init 하여 firebase deploy 했다. 그리고 firebase의 기능을 담을 index.js에 이제 마무리 작업만 하면 됐는데, 역시나 쉽게 실행되지 않았다.

 

도대체 Missing "." 이것의 의미는 무엇일까? 어디선가 점을 빼뜨렸나? 그러나 나는 쉽게 해결할 수 없었다. 몇 시간의 구글링을 통한 끝에 내가 해결한 방법은 바로 이것이다.

 

✅ firebase v9 호환 업데이트 하는 방법 링크

 

Firebase의 index.js 파일을 v9 버전으로 바꿔서 작성하면 오류가 사라진다. 비교적 간단하게 해결이 되었으나, 주니어 개발자인 내겐 어마 무시한 시간이 할애되었다. 그래도 이렇게 기록으로 남겨놓으니 훗날 같은 오류 발생 시엔 유연하게 대처할 수 있겠지?