时间戳

首页 > 解决方案 > 类型错误：_firebase_js__WEBPACK_IMPORTED_MODULE_1__.default.auth 不是函数

reactjs - 类型错误：_firebase_js__WEBPACK_IMPORTED_MODULE_1__.default.auth 不是函数

问题描述

如果可能的话，有人可以用我的代码的上下文向我解释这个错误吗？用 React.js 编写，用于使用 firebase 进行用户身份验证：

import React, { useEffect, useState } from "react";
import firebaseConfig from "./firebase.js";

export const AuthContext = React.createContext("");

export const AuthProvider = ({ children }) => {
    const [loading, setLoading] = useState(true);
    const [currentUser, setCurrentUser] = useState(null);
    useEffect(() => {
        firebaseConfig.auth().onAuthStateChanged((user) => {
            setCurrentUser(user);
            setLoading(false);
        });
    }, []);
    if (loading) {
        return <p>Loading...</p>;
    }
    return (
        <AuthContext.Provider value={{ currentUser }}>
            {children}
        </AuthContext.Provider>
    );
};

firebase.js 文件如下所示：

import firebase from "firebase/app";
import "firebase/auth";

const firebaseConfig = firebase.initializeApp({
  apiKey: "*******************************",
  authDomain: "react-firebase-auth-****.firebaseapp.com",
  databaseURL: "https://react-firebase-auth-****.firebaseio.com",
  projectId: "react-firebase-*******",
  storageBucket: "react-firebase********.appspot.com",
  messagingSenderId: "**********",
  appId: "****************************",
});

export default firebaseConfig;

标签： reactjsfirebase

解决方案

尝试像这样单独导出 Firebase 服务，而不是导出所有内容：

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

  const firebaseConfig = {...};

  if (!firebase.apps.length) {
    firebase.initializeApp(config);
  }
 
  const auth = firebase.auth();

  export {auth}

导入和使用：

import {auth} from "./firebase"

auth.onAuthStateChanged((user) => {...})

推荐阅读