背景
React.jsやそのフレームワークのNext.jsを触りたくなったので、とりあえず簡単そうな本を見ながら触ってみることにした。
▼購入した本
進めていくうちに記載されているソースコードでは動かないところがでてきたので、メモ。どうやら最新のfirebaseのバージョンはv9系なのだが、サンプルソースがv8を前提にしているため動かないらしい。
同じようにNext.jsを勉強しようとしている人をこんなところでつまづかせるわけにはいかないという謎の正義感である。
環境
+-- firebase@9.5.0
+-- next@12.0.4
+-- react@17.0.2ちなみにインストールされているバージョンはnpm list --depth=0で調べられる。
対応案
ざっくり3つの対応案を考えてみた。
対応案1
v9とv8をいい感じに互換してくれるモジュールをimportする方法。
▼以下の公式ドキュメントなどが参考https://firebase.google.com/docs/web/modular-upgrade#example_3_combining_version_8_and_version_9_code_styles
対応案2
CloudFirestore関数あたりで怒られるので、そこをリファクタする方法。
▼以下の公式ドキュメントなどが参考https://firebase.google.com/docs/web/modular-upgrade#example_2_refactoring_a_function
対応案3
v9をアンインストールしてv8をインストールする方法。
ちなみにだが公式ドキュメントには以下のように記載がある。
留意点：互換ライブラリは一時的なソリューションであり、将来のメジャーSDKバージョン（バージョン10やバージョン11など）で完全に削除される予定です。最終的な目標は、互換性のあるコードを削除し、バージョン9のモジュラースタイルのコードのみをアプリに保持することです。
https://firebase.google.com/docs/web/modular-upgrade#about_the_compat_libraries
つまり最新の書き方にリファクタする対応案2がもっとも最適である。
だが今回はv9に対応して書くことがゴールではなく、とりあえず触ってNext.jsをざっくり理解することにあったので、対応案1で進めることにする。
対応
対応は簡単である。サンプルソースでは以下のようなimportがあるが、
import firebase from 'firebase'それを以下のimportに書き換えるだけである。
import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'ただし、先にみた留意点のようにすでにfirebaseのバージョンが10や11になっていて上記のような互換性はサポートされていない可能性はあるが当面は上記で対応可能だ。
補足（swrについて）
あとfirebaseとは関係ないのだが、SWRでデータを取得するところでもつまづいた。useSWRの第二引数にfetchする関数を渡してあげるとうまくいった。
▼修正前
const { data, err } = useSWR(address)▼修正後
const fetcher = (url) => fetch(url).then((r) => r.json())
const { data, err } = useSWR(address, fetcher)あとこの本は異常に誤植が多い。校閲ガールはいないのか。
