Vuefireが無いエラー【Vue.jsとfirebaseの環境構築】

firebase×Vue.js×firestoreでアプリ開発

Vue.jsで実装したアプリをfirebase環境下で動かしたい。
firebaseを使うからには、DBはcloud firestoreを使おう

前提

• vue.jsをインストール
• firebaseをインストール
• vuefireをインストール
• firebaseの設定を書くファイルfirebase.jsを作成

環境

MacOS HighSierra
vue.js 2.9.6
firebase 6.11.0

問題点

Vuefireがインポートされない

export 'default' (imported as 'VueFire') was not found in 'vuefire'

問題のファイル内

firebase.js

import Vue from 'vue'
import VueFire from 'vuefire'

Vue.use(VueFire)

const firebaseApp = firebase.initializeApp({
firebaseの設定
})

import VueFire from 'vuefire'でインポートするときに、VureFireが無いよって怒られているみたいです。

解決方法

import Vue from 'vue'
import { firestorePlugin } from 'vuefire'

Vue.use(firestorePlugin)

以下略

インポートするときのプラグインの名前が異なっているようなので、{ firestorePlugin }と変数にしてあげたらうまく行きました。

まとめ

アップデートで名前が変わることもありうるので、プラグインをインポートするときには変数名を入れてあげたほうが安全かもしれません。
勉強になりました。