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して関数を呼び出せば大丈夫。

参考資料

公式ドキュメント