背景

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に慣れておくのがよさそう。

参考