AngularFire 7集成firebaseUi 5时报firebase/app导出错误如何解决

问题根因 #

Firebase v9及以上版本默认采用模块化API，移除了旧版的默认导出对象，但当前稳定版firebaseui内部仍依赖旧版firebase默认导出对象，因此会抛出找不到default导出的错误。

可行解决方案 #

• 方案1：配置路径别名重定向到compat包
  在你的项目tsconfig.json的compilerOptions中添加如下paths配置，将firebaseui内部导入的核心firebase包重定向到兼容版本：

{
  "compilerOptions": {
    "paths": {
      "firebase/app": ["./node_modules/firebase/compat/app"],
      "firebase/auth": ["./node_modules/firebase/compat/auth"]
    }
  }
}

配置完成后重启项目即可生效。

• 方案2：全局挂载firebase兼容对象
  如果方案1不生效，可以在导入firebaseui之前手动将兼容版firebase挂载到全局window对象，供firebaseui内部读取：

// 先导入兼容版firebase
import * as firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
// 挂载到全局
(window as any).firebase = firebase;
// 再导入firebaseui
import * as firebaseui from 'firebaseui';

• 方案3：检查版本兼容性
  确认你的firebaseui版本和firebase版本匹配，firebaseui v6.0.0及以上才适配Firebase v9/v10的compat包，可执行如下命令升级到最新稳定版：

npm install firebaseui@latest

• 附加优化：调整初始化逻辑避免重复报错
  组件销毁时需要主动清理firebaseui实例，避免二次进入页面重复初始化报错，修改后的完整代码如下：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Router } from '@angular/router';
import * as firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
(window as any).firebase = firebase;
import * as firebaseui from 'firebaseui';

const PhoneAuthProvider = firebase.auth.PhoneAuthProvider;
const GoogleAuthProvider = firebase.auth.GoogleAuthProvider;

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit, OnDestroy {
  ui!: firebaseui.auth.AuthUI;

  constructor(
    private afAuth: AngularFireAuth,
    private router: Router
  ) { }

  ngOnInit(): void {
    // 复用已有实例避免重复初始化
    if (firebaseui.auth.AuthUI.getInstance()) {
      this.ui = firebaseui.auth.AuthUI.getInstance()!;
      this.ui.reset();
    } else {
      this.ui = new firebaseui.auth.AuthUI(firebase.auth());
    }

    const uiConfig: firebaseui.auth.Config = {
      signInOptions: [
        PhoneAuthProvider.PROVIDER_ID,
        GoogleAuthProvider.PROVIDER_ID,
      ],
      callbacks: {
        signInSuccessWithAuthResult: this.onSuccessLogIn.bind(this)
      }
    }

    this.ui.start('#firebaseui-auth-container', uiConfig);
  }

  ngOnDestroy(): void {
    // 销毁组件时清理UI实例
    this.ui.delete();
  }

  private onSuccessLogIn(authResult: firebase.auth.UserCredential): boolean {
    // 自定义登录成功后的逻辑
    this.router.navigate(['/home']);
    // 返回false阻止firebaseui默认跳转行为
    return false;
  }
}

内容的提问来源于stack exchange，提问作者Ali Maher