#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'
これで解決しました