Javascript React-Firebase-RecaptchaVerifier不是构造函数

我正在尝试创建一个React应用程序，它使用“onSubmit”按钮触发

handleSignUp（）

。但是，每次调用

handleSignUp（）

时都会出现此错误

类型错误： _基本\u网页包\u导入的\u模块\u 2\u.default.auth.RecaptchaVerifier不是构造函数

firebase初始化-base.js

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

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID
});

export default app;

SignUp.js

import React, { Component } from "react";
import { withRouter } from "react-router";
import app from "./base";

class SignUp extends Component {
  componentDidMount() {
    window.recaptchaVerifier = new app.auth.RecaptchaVerifier(this.recaptcha, {
      size: "normal",
      callback: function(response) {
        console.log("reCAPTCHA solved, allow signInWithPhoneNumber.");
      },
      "expired-callback": function() {
        console.log("Response expired. Ask user to solve reCAPTCHA again.");
      }
    });
    window.recaptchaVerifier.render().then(function(widgetId) {
      window.recaptchaWidgetId = widgetId;
    });
  }

  handleSignUp = async () => {
    var phoneNumber = "+16505554567";
    var appVerifier = new app.auth.RecaptchaVerifier("recaptcha-container");

    try {
      await app
        .auth()
        .signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(function(confirmationResult) {
          window.confirmationResult = confirmationResult;
        });
    } catch (error) {
      alert(error);
    }
  };
  render() {
    return (
      <div ref={ref => (this.recaptcha = ref)}>
        <h1>Sign up</h1>
        <form onSubmit={this.handleSignUp}>
          <button type="submit">Sign Up</button>
        </form>
      </div>
    );
  }
}

export default withRouter(SignUp);

import React，{Component}来自“React”；
从“react router”导入{withRouter}；
从“/base”导入应用程序；
类注册扩展了组件{
componentDidMount（）{
window.recaptchaVerifier=新建app.auth.recaptchaVerifier（this.recaptcha{
大小：“正常”，
回调：函数（响应）{
log（“reCAPTCHA已解决，允许使用PhoneNumber登录”）；
},
“过期回调”：函数（）{
log（“响应已过期。请用户再次解决reCAPTCHA。”）；
}
});
window.recaptchaVerifier.render（）.then（函数（widgetId）{
window.recaptchaWidgetId=widgetId；
});
}
handleSignUp=async（）=>{
var phoneNumber=“+1650554567”；
var appVerifier=new app.auth.repactchaverifier（“repactcha容器”）；
试一试{
等待应用程序
.auth（）
.signInWithPhoneNumber（phoneNumber，appVerifier）
.然后（函数（确认结果）{
window.confirmationResult=确认结果；
});
}捕获（错误）{
警报（错误）；
}
};
render（）{
返回(
（this.recaptcha=ref）}>
注册
注册
);
}
}
使用路由器导出默认值（注册）；

---

还可以运行

var-appVerifier=new-app.auth.repactchaverifier（“repactcha容器”）

自动刷新网页

RecaptchaVerifier

构造函数驻留在

firebase.auth

中。您需要传递

窗口。recaptchaVerifier

作为

使用PhoneNumber登录的第二个参数

我花了3个小时才发现问题。 初始化firebase应用程序时，如

app.initializeApp(config);

然后您可以使用调用方法：app.auth（）

要创建RecaptchaVerifier实例，必须使用：app.auth

app.auth().createUserWithEmailAndPassword(email, password);

window.recaptchaVerifier = new app.auth.RecaptchaVerifier('captcha-container', {
        'size': 'invisible'
    });

---

我也会面对这个问题并解决。此代码绝对有助于使用firebase phone auth登录

Firebase.js

import * as Firebase from 'firebase';

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID
});
Firebase.initializeApp(app);
export default Firebase;

signup.js

    import React, { useState  } from 'react';
    import Firebase from './container/Firebase';
    import 'react-phone-number-input/style.css'
    import PhoneInput from 'react-phone-number-input'

    const Signup= () => {

    const [value, setValue] = useState(0);

function setuprecaptcha (){
    window.recaptchaVerifier = new Firebase.auth.RecaptchaVerifier('recaptcha-container', {
        size: 'invisible',
        callback: function (response) {
            console.log("recature resolved")
            this.onSignInSubmit();
        }
    });

}

 
function onSignInSubmit(event) {
    
    event.preventDefault();
    setuprecaptcha();
    var phoneNumber = value;
    var appVerifier = window.recaptchaVerifier;
    Firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(function (confirmationResult) {
            console.log("Success");
            // SMS sent. Prompt user to type the code from the message, then sign the
            // user in with confirmationResult.confirm(code).
            window.confirmationResult = confirmationResult;
            var verificationId = window.prompt("Enter otp")
            confirmationResult
                .confirm(verificationId)
                .then(function (result) {
                    // User signed in successfully.
                    var user = result.user;
                    user.getIdToken().then(idToken => {
                        window.localStorage.setItem('idToken', idToken);

                       
                        console.log(idToken);
                    });
                })
                .catch(function (error) {
                    // User couldn't sign in (bad verification code?)
                    console.error("Error while checking the verification code", error);
                    window.alert(
                        "Error while checking the verification code:\n\n" +
                        error.code +
                        "\n\n" +
                        error.message
                    );
                });

        })
        .catch(function (error) {
            console.log("sign Up error:" + error.code);
        });

}

---

你能发布解决方案吗？