Firebase JS SDK v9 になってimportの記述が変わってた

プログラミング初学者のメモなので、訂正等あればご意見ください。

Firebase JS SDKがv9.0.0になってた

プログラミングの勉強を始めようと思ってFirebaseを用いたログイン認証を作ろうとしたら、始める前日（2021/8/25)にFirebase JS SDKが v8.10.0 → v9.0.0 になってました。
ここに気づくのに時間がかかった…。
「15分で作れるFirebase Webログイン認証！」を見ながら3日間も格闘したので、その格闘の軌跡を置いておきます。
これからFirebaseを利用する人の為になれれば。

v8以前のコードをv9で実行すると発生するエラー

v8.10.0以前のFirebaseでは、

import firebase from 'firebase'
import "firebase/auth"
import "firebase/firebstore"

の形でライブラリの導入が行われていました。
ですが、v9.0.0では以下のようなエラーメッセージが出るようになります。

This dependency was not found:

* firebase in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/Signin.vue?vue&type=script&lang=js

To install it, you can run: npm install --save firebase
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'

私の場合は、vue.js + Firebase Authenticationでログイン認証を作る というのを参考にしていて、このメッセージが出ます。
他にも様々な部分でエラーが出て、「15分でできるって聞いてたのにエラーばっかり何で？！」となりました。

v9でのimportの記述

v8以前のFirebase公式のドキュメントにも記述がありますが、必要なライブラリ以外は導入すべきでないらしいです。
ファイルサイズがでっかいので。
その志向をより強くしたのがv9.0.0のようで、

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

このように、使用するモジュール(?)のみをimportするらしいです。
例えばFirebase SDKの初期化をするコードだと、

v8_10_0.js

import firebase from "firebase/app";

const firebaseConfig = {
  // ...
};

firebase.initializeApp(firebaseConfig);

これが、

v9_0_0.js

import { initializeApp } from "firebase/app"

const firebaseConfig = {
  // ...
}

const firebaseApp = initializeApp(firebaseConfig);

こうなるみたいです。

compatライブラリで簡単にアップデート

既に書いてたコードをどうv9にアップデートすればよいのか分からない場合等は、とりあえずcompat(互換)ライブラリを使えばいいみたいです。
公式ドキュメント：バージョン8からモジュラーWebSDKにアップグレードします

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

ただ、これだとv9の高速化の恩恵を受けられないそうなので、一時的な対処のようです。

FirebaseUI はv9に対応してないらしい

Firebase UIはv9に対応できていないらしいので、firebase v9環境でFirebaseUIを使用すると

 warning  in ./node_modules/firebaseui/dist/esm.js

"export 'default' (imported as 'firebase') was not found in 'firebase/app'

と、importがうまく行かないエラーが出ます。
なので、もしFirebase v9のために他の部分をアップデートしたとしてもFirebaseUI部分は結局compatライブラリを使用することになります。

このエラーログのファイルを探して以下のように書き換えました。

./node_modules/firebaseui/dist/esm.js

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

FirebaseUIを使用するページでは、以下のようにimportしています。

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import * as firebaseui from "firebaseui"
import "firebaseui/dist/firebaseui.css";

あとがき

プログラミングを勉強し始めて日が浅く、Qiitaに投稿するのは初めてなので書き方等でアドバイスを頂けると嬉しいです。
数日前にアップデートされたライブラリに突撃する初学者、確実に茨の道ですががんばります。