FirebaseUIを使用してexport 'default' (imported as 'firebase') was not found in 'firebase/app' と表示された時の対処

##Firebase UIはv9にまだ対応していない

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

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

Firebaseは2021年8月25日にv8→v9に正式にアップデートされ、npm install --save firebaseとすると自動的にv9がインストールされます。
ですが2021年9月8日現在、Firebase UIはFirebase JS SDK v9に対応していません。
そのため上記のようなエラーが発生します。
FirebaseUIを使う際は後述のcompat(互換)ライブラリを使用してv8以前のように書く必要があります。

compatライブラリ

Firebase JS SDK v9以前のコードを使えるようにする一時的な措置としてcompat(互換)ライブラリがあります。
公式ドキュメント：バージョン8からモジュラーWebSDKにアップグレードします

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

パスにcompatを挟むと、v8以前のままのコードで動くようです。
ただ、Composition APIを使用した高速化の恩恵は得られません

Firebase UIを Firebase v9に対応させる

まずエラーログにある./node_modules/firebaseui/dist/esm.jsのimportをcompatライブラリに書き換えます。

./node_modules/firebaseui/dist/esm.js

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

そして、FirebaseUIを設置しているファイルを以下の通りに書き換えます。
私の場合はこんな感じです。

signin.vue

<!-- abbr -->
import { getAuth } from "firebase/auth";
import * as firebaseui from "firebaseui"
import "firebaseui/dist/firebaseui.css";

var ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(getAuth());
<!-- abbr -->

FirebaseUIインスタンスの初期化で注意する点は、AuthUI()の引数であるAuthインスタンスの取得はfirebase.auth()ではなくgetAuth()です。