javascript - 无法读取未定义的属性 'auth'

Question

我正在尝试在 VueJS 项目中使用 firebase-ui。

我的 api 凭据在名为 config.js

的文件中定义

export default {
apiKey: "*****",
authDomain: "*****.firebaseapp.com",
databaseURL: "https://my-project.firebaseio.com",
projectId: "*****",
storageBucket: "*****",
messagingSenderId: "73482979",
appId: "1:685818581200:web:1f5ebjnfsdjnj",
measurementId: "G-BHJK6N67PZ"
};

我正在我的 init.js 中导入 config.js 文件，整个 firebase 设置已完成:

import config from "./config";
import firebase from "firebase";
import firebaseui from "firebaseui";
import "firebase/auth";
import "firebase/firestore";

const app = firebase.initializeApp(config);
const auth = firebase.auth();
const firestore = app.firestore();

const authUi = new firebaseui.auth.AuthUI(auth); //Error is thrown at this point

export default app;
export { auth, authUi, firestore };

但是错误 -> Cannot read property 'auth' of undefined' 被抛出，我已经几天无法离开这里了。我检查了文档(https://firebase.google.com/docs/auth/web/firebaseui#before_you_begin)，一切都正确完成，甚至使用最新的 firebaseui 版本 "firebaseui": "4.7.0" 位于 package.json

对我如何解决这个问题有什么帮助吗？

Answer 1

从 Firebase 9.0.0(2021 年 8 月 25 日)开始

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

使用向后兼容的接口(interface)。

参见 https://firebase.google.com/docs/web/modular-upgrade完整的升级路径