書籍「React.js & Next.js超入門」のソースがfirebaseのバージョンのせいで動かないので、なんとかする

背景

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つの対応案を考えてみた。

v9とv8をいい感じに互換してくれるモジュールをimportする方法。

CloudFirestore関数あたりで怒られるので、そこをリファクタする方法。

v9をアンインストールしてv8をインストールする方法。

ちなみにだが公式ドキュメントには以下のように記載がある。

留意点：互換ライブラリは一時的なソリューションであり、将来のメジャーSDKバージョン（バージョン10やバージョン11など）で完全に削除される予定です。最終的な目標は、互換性のあるコードを削除し、バージョン9のモジュラースタイルのコードのみをアプリに保持することです。

つまり最新の書き方にリファクタする対応案2がもっとも最適である。

だが今回はv9に対応して書くことがゴールではなく、とりあえず触ってNext.jsをざっくり理解することにあったので、対応案1で進めることにする。

対応は簡単である。サンプルソースでは以下のようなimportがあるが、

import firebase from 'firebase'

それを以下のimportに書き換えるだけである。

import firebase from 'firebase/compat/app' import 'firebase/compat/firestore'

ただし、先にみた留意点のようにすでにfirebaseのバージョンが10や11になっていて上記のような互換性はサポートされていない可能性はあるが当面は上記で対応可能だ。

あとfirebaseとは関係ないのだが、SWRでデータを取得するところでもつまづいた。useSWRの第二引数にfetchする関数を渡してあげるとうまくいった。

▼修正前

const { data, err } = useSWR(address)

▼修正後

const fetcher = (url) => fetch(url).then((r) => r.json()) const { data, err } = useSWR(address, fetcher)

あとこの本は異常に誤植が多い。校閲ガールはいないのか。