바닐라 자바스크립트 환경 Firebase SDK 에러

npm으로 Firebase를 설치 시 경로 에러가 나타나는 경우

에러 내용

import {
  getAuth,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";

원인

"firebase/auth"는 node_modules 디렉터리 안에 있는 firebase 패키지의 auth 모듈을 가리킵니다. 이 방식은 Node.js 환경이나 웹팩(Webpack), 롤업(Rollup), Parcel 등의 모듈 번들러가 설정된 프론트엔드 환경에서 동작합니다.

해결 방법

import {
  getAuth,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
  onAuthStateChanged,
} from "https://www.gstatic.com/firebasejs/9.2.0/firebase-auth.js";

• 위 코드처럼 SDK 경로를 직접적으로 적어주기.