Firebase - Attempted Import Error: ‘Firebase’ Does Not Container A Default Export ~ 오류 해결하기!

2021.11.08 - [Developer/IT 도서] - Do it! 클론 코딩 트위터 노마드 코더 니꼴라스와 만드는 트위터

Do it! 클론 코딩 트위터 노마드 코더 니꼴라스와 만드는 트위터

책 보면서 실습을 하는 도중 한 시간 정도 원인을 찾았다.

 

문제 )

코드는 아래와 같다. 책에 있는 내용을 그대로 타이핑했다.

import firebase from "firebase/app";
import "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTU_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MESUREMENT_ID
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export const analytics = firebase.auth();

 

하지만 아래 에러가 발생해서 답답했다.

 

해결 안)

firebase v8, v9 버전 문제로 import를 아래처럼 compat을 추가해야 한다고 한다.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

 

현재 설치되어 있는 firebase 버전이 궁금해서 package.json 파일을 확인해 보았다. 9.4 버전이구나 그렇구나.. 그런 거구나......

 

부들부들!!

 

해답을 참조한 URL 

https://firebase.google.com/docs/web/modular-upgrade#update_imports_to_v9_compat

버전 8에서 모듈식 웹 SDK로 업그레이드  |  Firebase Documentation

https://www.midnightinsomewhere.com/react-firebase-attempted-import-error-firebase-does-not-container-a-default-export-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0/

[react / firebase ] Attempted import error: ‘firebase’ does not container a default export ~ 오류 해결하기! »