[21.12.04] 에러핸들링 - import 문법을 통해 모듈을 불러올 수 없음 (번들러 부재로 인한 오류)

[jacobways]

문제 상황 및 에러 로그

• 상황 : 공식문서에서 제공한 코드를 사용했으나, firebase app 모듈을 불러오지 못함
• 에러메세지 : Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

원인 및 해결방안

• 원인 : import {} from "package" 코드는 웹팩 등의 번들러를 사용할 때 유효함
  • 특히 파이어베이스 v9는 모듈 번들러를 지원하데 초점을 맞추고 있다고 함
• 원인 관련 링크 : https://stackoverflow.com/questions/69230383/failed-to-resolve-module-specifier-firebase-app
• 해결방안 : "from" 뒤에 url을 통해 불러오기
• 공식 문서 링크 : https://firebase.google.com/docs/web/learn-more?hl=ko#available-libraries

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js';
import { getAnalytics } from 'https://www.gstatic.com/firebasejs/9.6.0/firebase-analytics.js';