리액트 firebase 오류 (firebase import오류)

 

노마드코더 니꼴라스와 만드는 트위터 서비스를 만들면서 오류를 발견했습니다.

바로 firebase.js파일에서 다음과 같은 오류가 생깁니다.

import firebase from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

export default firebase.initializeApp(firebaseConfig);

 

컴파일에 실패하였고 import오류가 뜹니다.

 

https://exerror.com/solved-export-default-imported-as-firebase-was-not-found-in-firebase-app/

[Solved] export 'default' (imported as 'firebase') was not found in 'firebase/app'

exerror사이트를 참고해보면 firebase의 버전이 올라감에 따라 버전에 맞게 올바르게 import를 해줘야 한다고 나와있습니다.

 

import firebase from "firebase/app";

이 코드를 고쳐보면

import firebase from "firebase/compat/app";

이렇게 바뀝니다.

 

[여기서 알아야 할 사실은 위코드는 firebase8버전이하에서 지원하는 코드이고 밑 코드는 9버전이상에서 동작하는 코드입니다]

 

최종적으로 이렇게 되겠네요.

import firebase from "firebase/compat/app";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

export default firebase.initializeApp(firebaseConfig);

firebase와 /app 사이에 compat을 넣어주면 정상작동합니다.