问JS函数使用Firebase时出错并作出反应

EN

TypeError: _firebase__WEBPACK_IMPORTED_MODULE_1__.auth.createUserWithEmailAndPassword is not a function
    at signup (bundle.js:4226:56)
    at handleSubmit (bundle.js:2575:13)
    at HTMLUnknownElement.callCallback (bundle.js:41062:18)
    at Object.invokeGuardedCallbackDev (bundle.js:41111:20)
    at invokeGuardedCallback (bundle.js:41171:35)
    at invokeGuardedCallbackAndCatchFirstError (bundle.js:41186:29)
    at executeDispatch (bundle.js:45421:7)
    at processDispatchQueueItemsInOrder (bundle.js:45453:11)
    at processDispatchQueue (bundle.js:45466:9)
    at dispatchEventsForPlugins (bundle.js:45477:7)

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at Navbar (http://localhost:3000/static/js/bundle.js:3361:76)
    at Home

import React, { useContext, useState, useEffect } from "react";
import { auth } from "../firebase";
import { createUserWithEmailAndPassword } from "firebase/auth";

const AuthContext = React.createContext();

export function useAuth() {
  return useContext(AuthContext);
}

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);

  function signup(email, password) {
    return auth.createUserWithEmailAndPassword(email, password);
  }

  function login(email, password) {
    return auth.signInWithEmailAndPassword(email, password);
  }

  function logout() {
    return auth.signOut();
  }

  function resetPassword(email) {
    return auth.sendPasswordResetEmail(email);
  }

  function updateEmail(email) {
    return currentUser.updateEmail(email);
  }

  function updatePassword(password) {
    return currentUser.updatePassword(password);
  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  const value = {
    currentUser,
    login,
    signup,
    logout,
    resetPassword,
    updateEmail,
    updatePassword,
  };

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
}

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

const firebaseConfig = {
  //Hidden
};

const app = initializeApp(firebaseConfig);
const auth = getAuth();
export { app, auth };

import React, { useRef, useState } from "react";
import { Link } from "react-router-dom";
import {
  FormUser,
  Input,
  Label,
  Subtitle,
  TextWrapper,
  TopLine,
  FormButton,
  Credentials,
  HomePage,
  SignInLink,
  SignInText,
  RedirectSignIn,
  Credential,
} from "./Form.elements";
import { FaAngleLeft } from "react-icons/fa";
import { useAuth } from "../../contexts/AuthContext";
import { Alert } from "bootstrap";

const FormUp = ({
  primary,
  lightBg,
  lightTopLine,
  lightTextDesc,
  buttonLabel,
  description,
  topLine,
}) => {
  const emailRef = useRef();
  const passwordRef = useRef();
  const passwordConfirmRef = useRef();
  const { signup } = useAuth();
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();

    if (passwordRef.current.value !== passwordConfirmRef.current.value) {
      return setError("Password do not match");
    }

    try {
      setError("");
      setLoading(true);
      await signup(emailRef.current.value, passwordRef.current.value);
    } catch {
      setError("Failed to create an account");
    }

    setLoading(false);
  }

  return (
    <>
      <style>
        @import
        url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
      </style>
      <FormUser lightBg={lightBg} onSubmit={handleSubmit}>
        <TextWrapper>
          <HomePage href="/">
            <FaAngleLeft />
            <TopLine lightTopLine={lightTopLine}>{topLine}</TopLine>
          </HomePage>
          <Subtitle lightTextDesc={lightTextDesc}>{description}</Subtitle>
          {error && (
            <h5 style={{ color: "red", paddingBottom: "30px" }}>{error}</h5>
          )}
          <Credentials>
            <Credential id="email">
              <Label>Email</Label>
              <Input
                ref={emailRef}
                required
                type="email"
                placeholder="Email..."
              ></Input>
            </Credential>
            <Credential id="password">
              <Label>Password</Label>
              <Input
                ref={passwordRef}
                required
                type="password"
                placeholder="Password..."
              ></Input>
            </Credential>
            <Credential id="password-confirm">
              <Label>Password confirmation</Label>
              <Input
                ref={passwordConfirmRef}
                required
                type="password"
                placeholder="Password confirmation..."
              ></Input>
            </Credential>
          </Credentials>

          <FormButton disabled={loading} type="submit" big primary={primary}>
            {buttonLabel}
          </FormButton>

          <RedirectSignIn>
            <SignInText>Already have an account?</SignInText>
            <SignInLink href="/sign-in">Log in</SignInLink>
          </RedirectSignIn>
        </TextWrapper>
      </FormUser>
    </>
  );
};

export default FormUp;