Vuejs Firebase 연동 오류 해결 v9버전, 2023 [solved ]

요즘 firebase에서 업데이트가 많이 하다 보니까 연동할 때 다양한 오류가 뜹니다. 공식 홈페이지나 다양한 자료를 통해 VueJs 프로젝트와 Firebase를 연동할 때 이런씩으로 설명합니다.

 

 

Firebase이란?
• 구글의 모바일 및 웹 어플리케이션 개발 플랫폼입니다.
• 백엔드 서버 기능을 클라우드 서비스 형태로 제공합니다.
• 인증(Authentication), 데이터베이스(Firestore), 분석 (Analytics) 등의 기능 제공합니다.


1. VueJs 프로젝트 main.js 내용

import firebase from "firebase";

/* code from our Firebase console */
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

그렇지만 이런 오류 뜹니다. firebase 를 import 할 수 없다는 내용이었습니다. 찾아보니 버전문제였고 firebase 버전 9부터 사용법이 아예 바뀌었습니다.

Error Module not found: Error: Package path . is not exported from package 
C:\Users\Visual Code\node_modules\firebase (see exports field inC:\Users\Visual 
Code\node_modules\firebasenode_modules\firebase\package.json) Did you mean './firebase'?

해결방법은 다음과 같습니다. 해결방법은 import할때 자세한 경로로 가지고 오시면 됩니다.

일반 firebase import 대신

import firebase from 'firebase'

firebase compat 경로 추가해서 사용

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


const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

// firebase init 설정
const firebaseApp = firebase.initializeApp(firebaseConfig);

// db나 auth 같이 사용
const db = firebaseApp.firestore();
const auth = firebase.auth();

export { auth, db };

업데이트된 import 코드로 연동 오류를 해결해봤습니다~