背景
firebaseを利用したnuxt.jsのプロジェクトを作ろうと思ったが、pluginsでfirebaseのimportしているところで詰まった。
バージョン情報
| ライブラリ | バージョン |
|---|---|
| nuxt | 2.15.7 |
| firebase | 9.2.0 |
問題
以下のコードをpluginsディレクトリに記述して、firebaseを利用しようとしたが、devしたときにThis dependency was not foundのエラーが発生してfirebaseが見つからないとのこと。
/plugins/firebase.js
import firebase from 'firebase' // -> This dependency was not found
const config = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID,
}
if (!firebase.apps.length) {
firebase.initializeApp(config)
}
export default firebase
原因
2021年8月25日にfirebaseのjsのSDKがversion9に上がった際にapiが大きく変化し、firebaseをimportするのではなく、各機能をそれぞれimportするように仕様変更が行われた。
解決方法
以下のようにコードを書き換える。
/plugins/firebase.js
import { initializeApp } from 'firebase/app'
const config = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID,
}
const firebaseApp = initializeApp(config)
export default firebaseApp
感想
firebaseのversion9のリリースが比較的最近だったこともあり、firebase + nuxtを扱った記事でfirebaseの記述箇所をそのまま利用できなくなっていることが多いので注意が必要。また、どうしても書き換えがめんどくさい場合にはversion8のapiが使えるfirebase/compatを利用してもいいかもしれない。しかし将来性を考えると、version9のapiに慣れておくのがよさそう。