时间戳

首页 > 解决方案 > REACT 上的“FirebaseApp”类型上不存在属性“auth”

javascript - REACT 上的“FirebaseApp”类型上不存在属性“auth”

问题描述

我正在学习如何在反应应用程序中使用 firebase 身份验证，我遇到了这个问题。有人可以帮助我吗？

我已经用 npm 安装了 firebase。这是我的 firebase.js 文件。

import { initializeApp } from "firebase/app";
import 'firebase/auth'

const firebaseConfig = {
apiKey: "AIzaSyA_89k1bt6Z2_1lVLb_Vwn5OL9_GgTNQEQ",
authDomain: "auth-development-59396.firebaseapp.com",
projectId: "auth-development-59396",
storageBucket: "auth-development-59396.appspot.com",
messagingSenderId: "1003786595756",
appId: "1:1003786595756:web:fa93ae00e49a4c04c49e09"

};

const app = initializeApp(firebaseConfig);

export const auth = app.auth()
export default app

这是依赖包.json 文件。

"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"bootstrap": "^5.1.1",
"firebase": "^9.0.2",
"react": "^17.0.2",
"react-bootstrap": "^1.6.3",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
 }

标签： javascriptreactjsfirebasefirebase-authentication

解决方案

您正在使用新的模块化 SDKv8 ，它使用与名称空间 ( ) 版本不同的语法。尝试这个：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth" // New import

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app)
export default app

请注意，如果您必须重构所有代码以使用新语法。我建议查看文档以了解有关新语法的更多信息。另请查看此 Firecast。

如果您希望使用 V8 名称空间语法，那么您可以使用以下compat版本：

import firebase from "firebase/compat/app"
import "firebase/compat/auth"

if (!firebase.apps.length) firebase.initializeApp({...config})

export const auth = firebase.auth()
export default app

推荐阅读