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"
};

我正在将 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 };

但是抛出了错误-> Cannot read property 'auth'不确定的错误'，我已经几天没来过这里了。我已经检查了文档（https://firebase.google.com/docs/auth/web/firebaseui#before_you_begin），所有操作都正确完成，甚至使用package.json中的最新firebaseui版本"firebaseui": "4.7.0"

我如何解决此问题有帮助吗？

Answer 1

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

Answer 2

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

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。

无法读取未定义的属性“ auth”

2 个答案: