React/Firebase錯誤“未捕獲（承諾）TypeError：（0，_firebase__WEBPACK_IMPORTED_MODULE_1__.default）不是函式”

嘗試在我的反應應用程式中使用 firebase 實作用戶身份驗證。我有一個 firebase.js 檔案，其中定義了注冊/登錄/注銷功能，然后匯入到登錄/注冊螢屏中。在我真正嘗試注冊用戶之前，我沒有任何錯誤，然后我在標題中得到錯誤。

import { useState } from 'react';
import { Link } from "react-router-dom";
import register from "../firebase";
import "../css/RegisterScreen.css";

function RegisterScreen() {

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (password == '') {
        setError("Empty Password");
    } else {
        setEmail("");
        setPassword("");
        const res = await register(email, password);
        if (res.error) setError(res.error)
    }
  };

  return (
    <div className="register">
        <h2>Sign Up</h2>
        <div className="registerContainer">
            {error ? <div>{error}</div>: null}
            <form onSubmit={handleSubmit}>
                <input 
                    type="email"
                    className="registerBox" 
                    value={email}
                    placeholder="Email Address"
                    onChange={(event) => {
                        setEmail(event.target.value);
                    }}
                />
                <input 
                    type="password" 
                    className="registerBox" 
                    value={password}
                    placeholder="Password"
                    onChange={(event) => {
                        setPassword(event.target.value);
                    }}
                />
                <button 
                    className="registerButton"
                    type="submit">
                    Register
                </button>
            </form>
            <div>
                Already registered? <Link to="/login">Login</Link>
            </div>
        </div>
    </div>
  )
}

export default RegisterScreen

這行代碼尤其是發生錯誤的地方

        const res = await register(email, password);

這是 firebase.js 檔案和在那里創建的注冊函式

import { initializeApp } from "firebase/app";
import {
     getAuth,
     createUserWithEmailAndPassword,
     signInWithEmailAndPassword,
     signOut,
 } from "firebase/auth";
 import {
     getFirestore,
     addDoc,
     collection
 } from "firebase/firestore";

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

const register = async (email, password) => {
    try {
        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
        const user = userCredential.user;
        await addDoc(collection(db, "users"), {
            uid: user.uid,
            email: user.email,
        });
        return true
    } catch (error) {
        return {error: error.message}
    }
};

const login = async (email, password) => {
    try {
        const userCredential = await signInWithEmailAndPassword(auth, email, password);
        const user = userCredential.user;
        return true
    } catch (error) {
        return {error: error.message}
    }
};

const logOut = async() => {
    try {
        await signOut(auth)
        return true
    } catch (error) {
        return false
    }
};

export default {
    register,
    login,
    logOut,
    db,
    auth,
}

uj5u.com熱心網友回復：

您不是從中匯出任何函式，firebase.js而是嘗試匯入register函式。而是嘗試匯出 Firebase 服務并在注冊螢屏中定義函式或匯出函式本身。嘗試：

// firebase.js
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db } // no default 

import { auth } from "../firebase";

const handleSubmit = async (e) => {
  e.preventDefault();
  if (password == '') {
    setError("Empty Password");
  } else {
    setEmail("");
    setPassword("");
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      const user = userCredential.user;
      await addDoc(collection(db, "users"), {
        uid: user.uid,
        email: user.email,
      });
      console.log("User created", user)
    } catch (error) {
      console.log(error.message)
    }
  }
};

標籤：Google Cloud Collective javascript反应火力基地firebase 身份验证

上一篇：沒有FirebaseApp'[Default]'錯誤，但firebase已經初始化

下一篇：firestore查詢可選過濾器：我是否必須為每種可能性創建索引？