[v9]firebase authenticationのComponent auth has not been registered yetについて

アプリ構成

要所要所違うが、大体上記の記事を参考にして作成した環境です
具体的にはelectron + react + webpack + firebaseと言う構成になっています
結構特殊な構成で、4時間ぐらい調べてようやく解決に至ったのでメモ

結論

上のissueを参考に解決に至った。結論を言うとfirebase v9からでは色々な環境検出し、それに対して違うSDKを提供するようになった（らしい）。ところで、electron自体が特殊なもので、main環境がnodeで、rendererがweb。

そのせいでwebpackで両者をまとめようとするとき何らかの原因でrenderer側にnode環境のfirebaseがbundleされてしまうことになった。そのため明示的にrendererを梱包する時にweb環境のfirebaseを適用することを指定しなければならない。

webpack.config.js

  ...

  // renderer該当箇所のresolveにaliasを指定
  // 強制的にweb環境のfirebaseをbundleするようにする
  resolve: {
    extensions: [".js", ".ts", ".jsx", ".tsx", ".json"],
    alias: {
      "@firebase/auth": path.resolve(
        __dirname,
        "node_modules/@firebase/auth/dist/esm2017/index.js",
      ),
      "@firebase/app": path.resolve(
        __dirname,
        "node_modules/@firebase/app/dist/esm/index.esm2017.js",
      ),
    },
  },

  ...

今回はauthとappしか使わなかったのでこの２つだけ指定しました。他のmoduleも使う場合にはそれも指定してください。

monorepoで使う場合は実際にファイルを保存しているnode_modulesディレクトリを指定しましょう

教訓

electronから卒業します...高度な機能が要らないと言ってずっとswiftを避けてきた自分が悪かった...