Vue 프로젝트에서 Firebase를 찾을 수 없다고 말했습니다.

이 사이트 을 참고로 Vue + Firebase 의 어플리케이션을 작성했을 때, 생각하지 않는 곳에서 막혔다. . .

그래, 타이틀대로 firebase를 찾을 수 없다고 말해지는 것이다. . .

firebase 설치

npm i firebase

firebase.js 만들기

src/firebase.js

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

// firebase init - add your own config here
const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: ''
}
firebase.initializeApp(firebaseConfig)

// utils
const db = firebase.firestore()
const auth = firebase.auth()

// collection references
const usersCollection = db.collection('users')
const postsCollection = db.collection('posts')
const commentsCollection = db.collection('comments')
const likesCollection = db.collection('likes')

// export utils/refs
export {
  db,
  auth,
  usersCollection,
  postsCollection,
  commentsCollection,
  likesCollection
}

firebase.js 에서 export한 것을 main.js 로 import

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { auth } from './firebase'

Vue.config.productionTip = false

let app
auth.onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
  }
})

이제 npm run serve 그렇다면,,,

 warning  in ./src/firebase.js

"export 'auth' (imported as 'firebase') was not found in 'firebase/app'

 warning  in ./src/firebase.js

"export 'firestore' (imported as 'firebase') was not found in 'firebase/app'

 warning  in ./src/firebase.js

"export 'initializeApp' (imported as 'firebase') was not found in 'firebase/app'

어째서 야네! ! !

Firebase 버전 업그레이드로 인한 변화였습니다.

여기 을 확인하면 알 수 있듯이 Firebase 버전이 8.0.0 이상으로 큰 변화가 있었던 것 같습니다. .

먼저 package.json에서 설치한 firebase 버전을 확인해 보겠습니다.

package.json

 "firebase": "^8.2.1",

흠. 확실히 8이상이다.

라고 해서,

// Before 8.0.0
import * as firebase from 'firebase/app'

// After 8.0.0
import firebase from 'firebase/app'

firebase.js 위와 같이 편집

src/firebase.js

import firebase from 'firebase/app'

이것으로 해결되었습니다

참고