【Nuxt＋Firebase】「This dependency was not found」の対処法

Nuxt.js＋Firebaseでアプリ開発をしている中で、次のエラーが発生して解決に時間を要したため、備忘録としてブログに残します。

This dependency was not found:
* firebase in ./plugins/firebase.js
To install it, you can run: npm install --save firebase  

エラー内容を翻訳すると、Nuxt.js内の「plugins」フォルダ内の「firebase.js」ファイルとの依存関係が見当たらないとのことで、インストールするには「npm install –save firebase」を実行してくださいとのこと。

ちなみに、「npm install –save firebase」は既に実行しており、エラーは解消できませんでした。

この記事では、上記の「This dependency was not found: ***」のエラーを解消するために私が対処した方法について紹介します。

最初に結論からいうと、インストールしたFirebaseのバージョンを変更することで、エラーを解消できました。

エラー解消の流れについて、次から解説していきます。

エラー箇所の推測

エラーの内容から、Firebaseに関係する内容が原因と推定できます。

そして、開発しているアプリの中で、Firebaseに関係しているのは、次の２種類のファイルです。

この２種類のファイルの内容を調査して、試行錯誤することで最終的にエラーを解消できました。

「firebase.js」ファイルの内容調査

アプリ開発時、Nuxt.js内に手動でpluginsフォルダを作成し、そのフォルダ内に「firebase.js」ファイルを作成しています。

理由は、Firebaseで新規作成したプロジェクトと連携するためのAPIキーなどを指定したファイルが必要だからです。

「firebase.js」ファイルの記載内容は以下のとおりです。
記載方法については、ネットで拾ってきた記載方法を流用しています。

import firebase from 'firebase'

if (!firebase.apps.length) {
  firebase.initializeApp(
    {
      apiKey: "連携するFirebaseプロジェクトの情報を記載",
      authDomain: "連携するFirebaseプロジェクトの情報を記載",
      projectId: "連携するFirebaseプロジェクトの情報を記載",
      storageBucket: "連携するFirebaseプロジェクトの情報を記載",
      messagingSenderId: "連携するFirebaseプロジェクトの情報を記載",
      appId: "連携するFirebaseプロジェクトの情報を記載",
    }
  )
}

export default firebase;

本来であれば、上記ファイル内の記載方法が間違っている可能性を調査すべきですが、上記の記載方法は別のアプリで実際に使用して、問題なく動作することを既に確認しています。

同様の方法で記載した別のアプリが問題なく動作しているため、「firebase.js」ファイルの内容は今回のエラー発生の真の要因ではないと推定しました。

Firebaseインストール時に追加されたファイル

エラー発生時、ターミナルで実行したFirebase関係のコマンドはおもに以下の４つです。

最初に、「npm install –save firebase」を実行した段階で、「This dependency was not found: ***」のエラーが発生したため、エラー解消を模索する中で、他のコマンドも実行しました。

結果として、上記コマンドを実行しても、エラーは解消されませんでした。
ただし、ネットで今回のエラーについて調べた中では、基本的に上記のコマンドが解決方法として検索に出てくるため、まずは上記コマンドで解決できるか試した方が良いかもしれません。

私の場合、ネットで調べて出てくる方法を試してもエラーが解消されず、打つ手無しの状態となりました。

そのため、実際に同じやり方で動作している別のアプリと比較したところ、明確に異なる点を発見しました。

それは、インストールしたFirebaseのバージョンです。

Nuxt.js内の「package.json」ファイルの”dependencies”を確認したところ、別のアプリではFirebaseのバージョンは8系でしたが、今回インストールしたFirebaseのバージョンは9系（9.5.1あたり）となっていました。

そのため、動作正常な別のアプリとバージョンを合わせ、「npm install –save firebase@8.7.1」で8系に変更したことで、エラーが解消されました！

最終的な「package.json」ファイル内の“dependencies”の記載は以下のとおりです。

  "dependencies": {
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.8.3",
    "firebase": "^8.7.1",
    "nuxt": "^2.15.7"
  },

Firebaseのバージョンを9系にするとエラーが発生する理由は、おそらく「firebase.js」ファイルに問題があるのだと推測します。
その原因については、Firebaseのバージョンが8系から9系に変わる際に、どのような変更がされたか調査しなければわかりません。

ようするに、古いデータから流用した「firebase.js」ファイルと、今回インストールした新しいバージョンのFirebase（9系）の相性が悪いことがエラー発生の要因だと推測します。

今回のバージョン関係の問題は、ネットではあまり取り上げられていないため、ネットで調べても解決しない場合はバージョンに問題がないか調査してみましょう。