This dependency was not foundを解決したい

問題

nuxt.jsでFirebaseを利用しようとした時に、 This dependency was not foundというエラーが出た。

firebase.js

import firebase from 'firebase'
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

バージョン情報

|ライブラリ|バージョン| |:---|:---:| |nuxt.js|2.15.8| |Firebase|9.22.0|

解決

原因としては、firebaseV8からV9に上がったことでimportの仕方に変更があったためだ。 上記のコードを以下のように書き換えてください。

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};

firebaseV8ではimport firebase from "app/firebase"となっていて利用しないメソッドも全てimportしていたが、firebaseV9になって、queryやgetFireStoreなど必要なメソッドのみをimportできるようになった。

firebaseを利用する場合は、 V8と変わらずimportして関数を呼び出せば大丈夫。

参考資料

公式ドキュメント

https://firebase.google.com/docs/web/setup