firebase9に更新したら型のエラーがでたので対応したメモ

概要

firebaseのupdateをしたら、以下のエラーが発生。 firebaseを8から9にあげたのが原因。

Uncaught SyntaxError: The requested module '/whitemap/@fs/D:/develop/develop/project/aws-whitemap/aws-whitemap-client/node_modules/.vite/firebase_app.js?v=bebe78db' does not provide an export named 'default'

Upgrade from version 8 to the modular Web SDK を参考に対応する。

互換のある書き方に修正する。

以下の書き方に変更。これでエラーは消えた。

- import firebase from 'firebase/app';
- import 'firebase/auth';
- import 'firebase/firestore';


+ import firebase from 'firebase/compat/app';
+ import 'firebase/compat/auth';
+ import 'firebase/compat/firestore';

９の書き方(モジュラースタイル)に修正する。

動かすだけなら上記でよいが、今後のアップデートを考えると、9の書き方(モジュラースタイル）に変更したほうが良いため、リファクタリングする。

日本語のドキュメントだとWebv9(Beta)に新しい書き方がかいてある。
英語版のドキュメントではv9(modular)になっている。

client/src/domain/firebase/index.ts

- import firebase from 'firebase/compat/app';
- import 'firebase/compat/auth';
- import 'firebase/compat/firestore';


+ import { initializeApp } from 'firebase/app';
+ import { getAuth } from 'firebase/auth';
+ import {
+   getFirestore,
+   serverTimestamp as getServerTimestamp,
+ } from 'firebase/firestore';
import config from './config';


- if (!firebase.apps.length) {
-   firebase.initializeApp(config);
- }
- export const db = firebase.firestore();
- export const auth = firebase.auth();


+ const firebaseApp = initializeApp(config);
+ export const auth = getAuth(firebaseApp);
+ export const db = getFirestore(firebaseApp);

クエリの問い合わせも関数型っぽい書き方になっている。

実際に書き換えた差分はGitHubで。

参考

完了時点のソース

バージョン8からモジュラーWebSDKにアップグレード
Cloud Firestore にデータを追加する
データを読み取る