firebase-toolsを8系にバージョンアップしたときにwebpackのビルドがコケた話

8816 ワード
firebase-tools Firebase Web Node.js Node.js テキストリンク

経緯

個人開発でフロントエンドにVue.js、バックエンドにFirebaseを利用したアプリケーションを作っています。（気が向いたときに作業しているので中々進みませんが。。）

最近ふと思い立ってnpmパッケージのバージョンを上げようと思ったところ、firebase-toolsのバージョンアップに苦しんだので供養しておきます。

※バージョンアップ前は v7.3.2 でした。
※firebase-toolsv8.0.0のリリースは2020年4月1日なので、投稿時点で約半年経過していることになります。。

firebase-tools の使いどころ

firebase-toolsはコマンドラインツールとして、プロジェクトの設定やデプロイなどを実行できます。

しかしコマンドラインから操作するだけではなく、webpackでFirebaseのプロジェクトを切り替える方法で紹介されているようにNode.jsのコードから利用することも可能で、webpack の loader の処理として利用することができます。

firebase-config-loader.js
// https://medium.com/google-cloud-jp/webpack-multiproject-firebase-55d5bd8beb5d より引用

const firebaseTools = require('firebase-tools')
function FirebaseConfigLoader () {
  const callback = this.async()
  firebaseTools.setup.web().then(config => {
    callback(null, JSON.stringify(config))
  }).catch(err => callback(err))
}
module.exports = FirebaseConfigLoader

firebase-tools v8.0.0 で何があったか

詳細はリリース情報を見ていただくとして、Breaking Change がいくつかあるのですが、今回苦しめられたのは以下のものです。

BREAKING: Removes firebase setup:web command (replacement: firebase apps:sdkconfig web).

読んでわかる通りsetup:webコマンドを削除したのでapps:sdkconfig webを使ってね、と指示されています（非推奨になったのはv7.3.0-2019年8月28日リリース）。
コマンドラインでは使用したことはありませんが、webpack の loader で使っているので影響がありました。

最初の対応

最初はただ単純に、指示されている通りapps:sdkconfig webで呼び出すように変更しました。


 const firebaseTools = require('firebase-tools')
 function FirebaseConfigLoader () {
   const callback = this.async()
-  firebaseTools.setup.web().then(config => {
+  firebaseTools.apps.sdkconfig("web", "", {}).then(config => {
     callback(null, JSON.stringify(config))
   }).catch(err => callback(err))
 }
 module.exports = FirebaseConfigLoader

しかしコードを変更したのちビルドすると、以下のようなエラーを吐いて無事コケてしまいました。

 ERROR  Failed to compile with 1 errors

 error  in ./firebase-config.json

Module build failed (from ./firebase-config-loader.js):
FirebaseError: There are no WEB apps associated with this Firebase project
    at /hoge/node_modules/firebase-tools/lib/commands/apps-sdkconfig.js:25:19
    at Generator.next (<anonymous>)
    at /hoge/node_modules/firebase-tools/lib/commands/apps-sdkconfig.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/hoge/node_modules/firebase-tools/lib/commands/apps-sdkconfig.js:4:12)
    at selectAppInteractively (/hoge/node_modules/firebase-tools/lib/commands/apps-sdkconfig.js:23:12)
    at /hoge/node_modules/firebase-tools/lib/commands/apps-sdkconfig.js:69:39
    at Generator.next (<anonymous>)
    at fulfilled (/hoge/node_modules/firebase-tools/lib/commands/apps-sdkconfig.js:5:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)

エラーメッセージから察するにコード修正は間違っていなさそうです。が、念のためコマンドラインからも実行してみたところ、同じエラーメッセージが返ってきたのでコード以外に問題があることがわかりました。

$ npx firebase apps:sdkconfig web

Error: There are no WEB apps associated with this Firebase project

エラーの解消方法

エラーメッセージで色々検索してもピンポイントの記事が見つからず、手当たり次第に探したところ公式のFirebase を JavaScript プロジェクトに追加するを発見しました。ここに記載されている通り、Firebase コンソールから「アプリを登録する」ことで解消できました。

設定したのちコマンドラインから実行すると確かに config が取得できていることが確認できます。もちろん、ビルドも成功しました。

$ npx firebase apps:sdkconfig web
✔ Downloading configuration data of your Firebase WEB app
// Copy and paste this into your JavaScript code to initialize the Firebase SDK.
// You will also need to load the Firebase SDK.
// See https://firebase.google.com/docs/web/setup for more details.

firebase.initializeApp({
  "projectId": "...",
  "appId": "...",
  "databaseURL": "...",
  "storageBucket": "...",
  "locationId": "...",
  "apiKey": "...",
  "authDomain": "...",
  "messagingSenderId": "..."
});

結論

今回firebase-toolsをv8.0.0にバージョンアップする際にやることは2つありました。

  1. コードの修正
  2. Firebase コンソールから「アプリを登録する」

最後に

Firebase コンソールから「アプリを登録する」ということは、通常 Firebase プロジェクトを作成するときは必ずやっているものなのでしょうか。
実は最近設定できるようになった・するようになった項目、であれば心荒れることなく過ごせそうです。

参考