前回『VueとFirebaseでWebアプリ開発でハマったこと①: Strings must use singlequote, Extra semicolon』の続き。
概要
firestoreからデータを受け取ってVueで表示し、Vueでデータを送信してfirestoreに保存する一連の流れをInputしたいと思い、『firestore, vue.jsでリアルタイム同期のチャットを実装してみる [チュートリアル形式]』という記事を参考に作業していたところ次の3つのエラーにハマったのでどう解決したのかまとめる。
エラー1: Uncaught TypeError: Cannot read property 'install' of undefined
上記は、$ yarn serveの結果は正常だけどもアクセス後にエラーになるケースでした。
このエラーだけでは状況がわからないので、エラー文３行目に対応箇所であったfirebase.jsが表示されているためこのリンクをクリックするとConsole上にそのソースコードとエラーの箇所まで飛んでくれました。
原因としては、VueがFirebaseの機能を扱う初期化で問題が起きていることが分かります。
ググったところvuefireのissue『App startup failure with VueFire plugin #286』を見つけ、次のように対応するとエラーが解消できました。
- import VueFire from 'vuefire'
- Vue.use(VueFire)
+ import { firestorePlugin } from 'vuefire'
+ Vue.use(firestorePlugin)
エラー2: [Vue warn]: Error in beforeCreate hook: "Error: Vuetify is not properly initialized, see https://vuetifyjs.com/ja/getting-started/quick-start/#bootstrapping-the-vuetify-object"
正確には他にも複数エラーが出てますが、エラーの解決は基本的に最初のエラーから対応するべきなのでこのエラーに集中しました。
原因は、参考にした記事のプラグインのインストールにあたるところで、ただプラグインを入れるだけ解説されてますが、結局はこれだけでは不十分でちゃんとvuefireのインストール対応が必要でした。
エラー文にも出ている通り、公式のvuefireのクイックスタートにアクセスして「Nuxtのインストール」「Webpackのインストール」の対応が必須でした。
エラー3: These dependencies were not found
$ yarn serve
...
ERROR Failed to compile with 3 errors 12:48:50
These dependencies were not found:
* firebase/app in ./src/plugins/firebase.js
* firebase/firestore in ./src/plugins/firebase.js
* vuefire in ./src/plugins/firebase.js
To install them, you can run: npm install --save firebase/app firebase/firestore vuefire
色々触っているとたまにこのエラーが出てたんですが、これは単に./node_modulesを削除して再度$ npm installすると直りました。