[React] firebase 오류 - .js 파일에 firebase import 가 안됨

(React 너눈 왜케 오류가 많니...)

 

1. 문제 발생

firebase 에 프로젝트를 등록하고, React 에 등록을 해줬습니다.

그러고 index.js 에 import 하자마자 뜨는 오류

export 'default' (imported as 'firebase') was not found in './firebase' (module has no exports)

./firebase 에서 못찾겠답니다.

 

 

 

2. 문제 원인 찾기

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' - Exception Error

대충 해석하자면 firebase 가 버전 업 되면서 호환성 문제가 생겼다고 하네요

버전에 맞게 import 명령어를 바꿔주면 된다고 합니다.

 

 

 

3. 문제 해결

먼저 자신이 설치한 firebase 버전을 알아야겠죠

능숙하게 package.json yarn.lock 을 열어줘서 버전을 확인해봅니다.

저는 firebase 가 9.6 버전입니다.

 

 

 

 

일단 기존에 있던 이 import 명령어를 지워버리고

import firebase from './firebase';

 

 

firebase 8버전 이하

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

 

firebase 9버전 이상

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

해당하는 버전에 맞게 import 명령어를 복붙해줍니다.

 

오류없이 잘 실행되네요!

warning 이 거슬리긴한데...