无法读取未定义的属性“身份验证”

Posted

技术标签:

【中文标题】无法读取未定义的属性“身份验证”【英文标题】:Cannot read property 'auth' of undefined 【发布时间】:2021-02-24 05:02:04 【问题描述】:

我正在尝试在 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),一切都正确完成,甚至使用位于 package.json 中的最新 firebaseui 版本 "firebaseui": "4.7.0"

对我如何解决这个问题有任何帮助吗?

【问题讨论】:

【参考方案1】:

我遇到了同样的问题。经过几个小时的尝试,我通过编辑我的配置来解决它:

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。

【讨论】:

【参考方案2】:

从 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 了解完整升级路径

【讨论】:

【参考方案3】:

您错误地导入了 Firebase 客户端 JS 库。 documentation for module bundlers 显示:

// 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 的文档可能已过时。考虑使用文档页面顶部的“发送反馈”按钮提交您的反馈。

【讨论】:

我有同样的问题,但仍然是红色问题。它指向firebaseui.auth.AuthUI(auth)。如何导入这个?我所做的是import firebaseui from 'firebaseui',这似乎是错误的 @NandaZ 如果您有新问题,请单独发布。

以上是关于无法读取未定义的属性“身份验证”的主要内容,如果未能解决你的问题,请参考以下文章

无法读取未定义的 reactjs JWT 身份验证的属性“令牌”

无法读取未定义的属性“电子邮件”; firebase 身份验证();使用 Vuex

具有阿波罗身份验证的下一个 Js,无法读取未定义的属性“查询”

Flutter Web和Firebase身份验证TypeError:无法读取未定义的属性'app'

无法使用 Ngrx 读取未定义的属性“firebaseApp”

TypeError:无法读取未定义的属性“历史”