'React'에 해당되는 글 1건

react프로젝트에 firebase를 연결할 때 발생하는 오류는 다음과 같습니다.

Compiled with problems:X

ERROR in ./src/index.js 9:12-20

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

이 문제는 firebase버전에 따를 호환성 이슈때문에 발생하는 오류라고 합니다.

먼저 프로젝트의 package-lock.json파일을 열고 firebase package 버전을 확인합니다.

  "packages": {
    "": {
      "name": "nwitter",
      "version": "0.1.0",
      "dependencies": {
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
        "firebase": "^9.6.5",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "5.0.0",
        "web-vitals": "^2.1.4"
      }
    },

위와 같이 firebase가 9 이후의 버전인 경우라면 import를 다음과 같이 해줍니다.

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

그리고 firebase가 8 이전의 버전이라면 다음과 같이 import 합니다.

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

좀 더 자세한 사상을 알고 싶다면 다음 문서를 확인해 보세요.

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