无法读取未定义的属性“auth”
我正在尝试在 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"
};
我正在将 config.js 文件导入我的 init.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 };
但是抛出了错误 ->
无法读取未定义的属性“auth”
，并且我已经几天无法越过这里了。我已经检查了文档（
https://firebase.google.com/docs/auth/web/firebaseui#before_you_begin
），一切都正确完成，甚至使用位于 package.json 中的最新 firebaseui 版本
"firebaseui": "4.7.0"
有什么帮助可以解决这个问题吗？
从 Firebase 9.0.0（2021 年 8 月 25 日）开始，现在应该是
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
使用向后兼容的接口。
请参阅 https://firebase.google.com/docs/web/modular-upgrade 了解完整的升级路径
我遇到了同样的问题。经过几个小时的尝试，我通过编辑配置解决了这个问题：
import firebase from 'firebase/app';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';
如果你的 firebase 版本大于 7，你必须从“firebase/app”而不是“firebase”导入。
并且你必须从“firebaseui”导入 * ，而不是仅导入 firebaseui。
我的 packages.json 如下：
"dependencies": {
"firebase": "^8.8.0-202162022140",
"firebaseui": "^4.8.1",
},
顺便说一下，我的项目使用的是 Vue3.js。
您错误地导入了 Firebase 客户端 JS 库。 模块捆绑器文档 显示：
// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"
不要从“firebase”导入。从“firebase/app”导入，并确保遵守您使用的 SDK 版本的约定。
firebaseui 的文档可能已过时。请考虑使用文档页面顶部的“发送反馈”按钮提交您的反馈。