[React] React에서 Firebase 연동 오류 해결하기(v8 -> v9)

firebase 연동 오류

오류 발생 코드

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APT_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
};

firebase.initializeApp(firebaseConfig);

export const authService = firebase.auth();

노마드코더의 클론코딩 트위터(nwitter) 책을 보면서 공부를 하다가 React 기반의 환경에서 firebase를 연동하는 과정이 있었는데 정상적으로 진행이 되지 않았습니다. 혹시 실수를 해 오타가 존재하나 살펴보았더니 그런 부분은 존재하지 않았습니다.

Failed to compile

./src/fbase.js
Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase').

Failed to compile을 살펴보자면 firebase/app 은 firebase 라는 명칭으로 export 할 수가 없다는 것이었습니다.

해결 방안 탐색

Nomad corders

다행히 nwitter - React + Firebase Setup(issue)에서 해결방안을 찾을 수 있었습니다.

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

serranoarevalo 님께선 v9을 사용하고 있으니 위와 같은 코드로 기존에 있던 코드에서 사이에 compat 를 추가하라고 코멘트를 남기셨습니다.

firebase 공식 홈페이지

// Before: version 8
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

// After: version 9 compat
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

In order to keep your code functioning after updating your dependency from v8 to v9 beta, change your import statements to use the "compat" version of each import.

더 나아가 공식적으로 알기 위해 firebase Update imports to v9 compat를 접속했더니 v8에서 v9으로 업데이트를 한 경우 import를 할 때 compat 를 사용해야한다고 명시하고 있었습니다.

firebase 연동 완료

코드 수정

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APT_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);

export const authService = firebase.auth();

nomad corders의 serranoarevalo 그리고 nwitter - React + Firebase Setup(issue)에서 설명한대로 수정을 하고 npm run start 를 하였습니다.

결과

console.log(authService.currentUser); 의 결과대로 다행히 null 값이 출력되어 정상적으로 실행되는 것을 확인할 수 있었습니다.

참고

• firebase Update imports to v9 compat

• nwitter - React + Firebase Setup(issue)