VueでFirebaseを使うと "export 'firestore' (imported as 'firebase') was not found in 'firebase/app' 解決法

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'

これで解決しました

参考