auth.createUserWithEmailAndPassword 不是 function，反應

Question

基地.jsx ：

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


const firebaseConfig = {
config
  };

  export const app = initializeApp(firebaseConfig);
  export const auth = getAuth();

注冊.jsx

import React, { useState } from "react";
import { auth } from "../components/base";
import { Link, useNavigate } from "react-router-dom";

function Register() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState(null);
  let navigate = useNavigate();

  const handleRegister = async (e) => {
    e.preventDefault();
    try {
      await auth.createUserWithEmailAndPassword(email, password);
      await auth.signInWithEmailAndPassword(email, password);
      navigate("/");
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    <div className="register">
      <div className="container">
        <div className="box">
          <form onSubmit={handleRegister}>
            <h2>Register</h2>
            <div className="form-group">
              <label htmlFor="email">Email</label>
              <input
                type="email"
                className="form-control"
                id="email"
                placeholder="Enter email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <div className="form-group">
              <label htmlFor="password">Password</label>
              <input
                type="password"
                className="form-control"
                id="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
            <button type="submit" className="btn btn-primary">
              Register
            </button>
            <div>{error && <p className="error">{error}</p>}</div>
          </form>
          <p className="sign-up">
            Already have an account?
            <Link to="/login">
              <span>Login</span>
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
}

export default Register;

在此處輸入圖像描述

這幾乎是不言自明的，你們能幫我解決這個問題嗎？ 我已經掙扎了2個小時了。

我希望 createUserWithEmailAndPassword 在 Register.jsx 中工作，這樣我以后可以使用相同的信息登錄 Login.jsx。 但是在網站上，當我單擊 Register.jsx 中的提交按鈕時，彈出auth.createUserWithEmailAndPassword 不是 function

Answer 1

您使用的是 v9 SDK 版本，它使用具有頂級功能的模塊化 API。 因此createUserWithEmailAndPassword不再是auth object 上的方法，而是現在是頂級 function，您必須導入它，類似於為getAuth的，然后將auth object 作為其第一個參數傳遞給它：

createUserWithEmailAndPassword(auth, "username", "password")

當您對這個新的 API 進行編程或遇到其他錯誤時，我建議您將文檔放在手邊。 在這種情況下，您可以看到類似於您正在嘗試的代碼以及我在上面關於創建用戶的文檔中所擁有的代碼。 另請參閱介紹模塊化 SDK的博文和升級指南。