Act99 기술블로그

[React + Firebase] export 'default' (imported as 'firebase') was not found in 'firebase/app' 오류생길 때 본문

개발팁저장소/react

[React + Firebase] export 'default' (imported as 'firebase') was not found in 'firebase/app' 오류생길 때

Act99 2022. 2. 2. 17:42

React 에서 Firebase Auth 를 사용하기 위해 다음과 같은 코드를 짰다가 에러가 발생했다.

 

- firebase.js

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId,
};

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
export { auth };

 

 

 

- 해결방법

 

v8 에서 v9 로 이동하면서 compat/auth 를 import 해와야 한다.

 

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId,
};

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
export { auth };

 

해결 완료

'개발팁저장소 > react' 카테고리의 다른 글

[React] class 형 컴포넌트 vs function 형 컴포넌트  (0) 2022.02.07
[React] Context API 와 상태관리 툴의 차이  (0) 2022.02.03
만약 npx create-react-app 이 실행되지 않을 경우/ please remove any global installs with one of the following commands  (0) 2022.01.26
항해99 3주차 주특기 기본 - 날짜별 별점 누르기 + (캘린더 일기 만들기) 완성  (0) 2022.01.25
항해99 3주차 주특기 기본 - 날짜별 별점 누르기 + (캘린더 일기 만들기)  (1) 2022.01.22
'개발팁저장소/react' Related Articles more