React JS 接入 Firebase Authentication 实现 Facebook 登录出现 Provider 报错

问题背景 #

计划在React JS项目中使用Firebase Authentication实现Facebook登录功能，开发过程中先后出现两类报错，以下是解决过程记录。

初始报错 #

遇到的第一个报错为：TypeError: Cannot read property 'FacebookAuthProvider' of undefined，触发报错的代码行：

• facebook: new firebase.auth.FacebookAuthProvider()

查阅技术资料后尝试调整导入语句，将import * as firebase from "firebase/app";修改为import * as firebase from "firebase";，但修改后initializeApp相关逻辑又出现新报错。

原 firebaseSample.ts 代码 #

import * as firebase from "firebase/app";
import 'firebase/auth';
import 'firebase/firestore';
import config from 'config/config';

const FirebaseSample = firebase.initializeApp(config.firebase);

export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}

export const auth = firebase.auth();
export default FirebaseSample;

config.ts 代码 #

const config = {
firebase: { 
  apiKey: "unique_id",
  authDomain: "unique_id",
  databaseURL: "unique_id",
  projectId: "unique_id-1663e",
  storageBucket: "unique_id.appspot.com",
  messagingSenderId: "unique_id",
  appId: "1:unique_id",
  measurementId: "G-unique_id"
  }
}
export default config;

第一次修改后报错 #

调整导入语句使用firebase compat版本后，出现新报错：ReferenceError: Can't find variable: Providers

第一次修改后的 firebaseSample.ts 代码 #

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

const FirebaseSample = firebase.initializeApp(config.firebase);

export const Providers = {
facebook: new firebase.auth.FacebookAuthProvider()
}

 export const auth = firebase.auth();
 export default FirebaseSample;

报错截图：

第二次调整后的 firebaseSample.ts 代码 #

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

const FirebaseSample = firebase.initializeApp(config.firebase);

const Providers = {
  facebook: new firebase.auth.FacebookAuthProvider()
 }

   export Providers;    

  export const auth = firebase.auth();
  export default FirebaseSample;

最终解决方法 #

将全项目所有firebase相关导入语句统一修改为以下兼容格式后，所有报错均已解决：

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

解决后效果截图：

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