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

### 経緯

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

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

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

### `firebase-tools` の使いどころ

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

しかしコマンドラインから操作するだけではなく、[webpackでFirebaseのプロジェクトを切り替える方法](https://medium.com/google-cloud-jp/webpack-multiproject-firebase-55d5bd8beb5d)で紹介されているように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 で何があったか

詳細は[リリース情報](https://github.com/firebase/firebase-tools/releases/tag/v8.0.0)を見ていただくとして、Breaking Change がいくつかあるのですが、今回苦しめられたのは以下のものです。

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

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


### 最初の対応

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

```diff

 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)
```

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

```bash
$ npx firebase apps:sdkconfig web

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

### エラーの解消方法

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675806/58ff0710-2839-da98-4f39-8768b938b113.png)

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

```bash
$ 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 プロジェクトを作成するときは必ずやっているものなのでしょうか。 :thinking: 
実は最近設定できるようになった・するようになった項目、であれば心荒れることなく過ごせそうです。

### 参考

* webpackでFirebaseのプロジェクトを切り替える方法
    * https://medium.com/google-cloud-jp/webpack-multiproject-firebase-55d5bd8beb5d
* firebase-tools v7.3.0 release
    * https://github.com/firebase/firebase-tools/releases/tag/v7.3.0
* firebase-tools v8.0.0 release
    * https://github.com/firebase/firebase-tools/releases/tag/v8.0.0
* Firebase を JavaScript プロジェクトに追加する
    * https://firebase.google.com/docs/web/setup#register-app