javascript - firebase__webpack_imported_module_2__.auth.createuserwithemailandpassword 不是函数。？

Question

我有以下连接到 firebase 的设置，但出于某种原因，在浏览器控制台中它显示 auth.createUserWithEmailAndPassword() 不是函数。我的代码有问题吗？这是 login.js

import React, { useState } from 'react';
import './Login.css'
import { Link, useNavigate } from "react-router-dom";
import { auth } from "firebase/auth";


function Login() {
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const signIn = e => {
    e.preventDefault();
//some fancy firebase
  }


  const register = e => {
      e.preventDefault();
      auth
        .createUserWithEmailAndPassword(email, password)
        .then((auth) => {
          // it successfully created a new user with email and password
          if (auth) {
            navigate.push('/')
          }
      })
      .catch(error => alert(error.message))

    }

  return (
    <div className='login'>
            <Link to='/'>
                <img
                    className="login__logo"
                    src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/1024px-Amazon_logo.svg.png' alt=" "
                />
            </Link>
        <div className='login__container'>
          <h1>Sign-in</h1>

          <form>
            <h5>E-mail</h5>
            <input type='text' value={email} onChange={e => setEmail(e.target.value)} />

            <h5>Password</h5>
            <input type='password' value={password} onChange={e => setPassword(e.target.value)} />

            <button type='submit' onClick={signIn} className='login__signInButton'>Sign In</button>
          </form>

          <p>
            By signing-in you agree to the AMAZON FAKE CLONE Conditions of Use & Sale. Please
            see our Privacy Notice, our Cookies Notice and our Interest-Based Ads Notice.
          </p>

          <button onClick={register} className='login__registerButton'>Create your Amazon Account</button>

        </div>
    </div>
  )
}

export default Login

我也会在这里发布我的 firebase.js

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "Not mentioning my firbase config in and below",
  authDomain: "c",
  projected: " ",
  storageBucket: " ",
  messagingSenderId: " ",
  appId: " ",
  measurementId: " "
};

// const firebaseApp = firebase.initializeApp(firebaseConfig);
const firebaseApp = initializeApp(firebaseConfig);

// const db = firebaseApp.firestore();
const db = getFirestore(firebaseApp);

//const auth = getAuth(app);
//const auth = firebase.auth();
const auth = getAuth(firebaseApp);

export { db, auth };

我删除了授权。来自 auth.createUserWithEmailAndPassword(email, password).then(cred => { console.log(cred); 现在它给我浏览器控制台中的当前错误检查:

Uncaught (in promise) TypeError: Cannot create property '_canInitEmulator' on string 'test1234@gmail.com

尝试了以前在堆栈溢出中的所有解决方案，但都没有奏效还阅读了新的 firebase v.9.0+ 模块的一些文档，但还没有理解。对于使用 React js 的 firebase 授权，我将不胜感激。

Answer 1

createUserWithEmailAndPassword()是新 Firebase 中的顶级函数 Modular SDK .尝试导入函数，如下所示:

import { createUserWithEmailAndPassword } from "firebase/auth"
import { auth } from "../firebase.js"; // update path 

const register = (e) => {
  e.preventDefault();

  // auth instance as first param
  createUserWithEmailAndPassword(auth, email, password).then((auth) => {
      // it successfully created a new user with email and password
      if (auth) {
        navigate.push('/')
      }
    })
    .catch(error => alert(error.message))
}

您必须导入 auth 实例，它是 getAuth() 从 Firebase 文件导出的，而不是从 "firebase/auth" SDK 导出的。 createUserWithEmailAndPassword() 中的第一个参数应该是这个 auth 实例，但您现在只有 email 和 password 参数。