Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_1__.default.auth.RecaptchaVerifier is not a constructor

Question

Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_1__.default.auth.RecaptchaVerifier is not a constructor

This is the error I am getting when I am trying to implement otp verification in my react app

Code

import React, { Component } from 'react'
import db from '../firebase'
export class LooginOTP extends Component {
  handleClick=()=>{
    var recaptcha = new db.auth.RecaptchaVerifier('recaptcha');
    var number = '+xxxxxxxxxxxx';
    db.auth().signInWithPhoneNumber(number, recaptcha).then( function(e) {
      var code = prompt('Enter the otp', '');

        
        if(code === null) return;

        
        e.confirm(code).then(function (result) {
            console.log(result.user);

            document.querySelector('label').textContent +=   result.user.phoneNumber + "Number verified";
            
        }).catch(function (error) {
            console.error( error);
            
        });

    })
    .catch(function (error) {
        console.error( error);

    });
  }
  render() {
    return (
      <div>
           <label></label>
        
        <div id="recaptcha"></div>

        <button onClick={this.handleClick}>Click</button>
      </div>
    )
  }
}

export default LooginOTP

Here instead of x I am putting my phone number but it is still not coming.

I have also enabled phone verification in my firebase authentication.

My config file :

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';


var firebaseApp = firebase.initializeApp({
    apiKey: "xxxxxxxxxx",
    authDomain: "xxxxxxxxxx",
    projectId: "xxxxxxxxxx",
    storageBucket: "xxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxx",
    appId: "xxxxxxxxxx",
    measurementId: "xxxxxxxxxx"
});

const db = firebaseApp.firestore();

export { db };

Answer 1

db here is Firestore instance and not auth. Try exporting auth instance as shown below:

const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
const RecaptchaVerifier = firebase.auth.RecaptchaVerifier

export { db, auth, RecaptchaVerifier };

Then change your imports to:

// import db from '../firebase'

import { db, auth, RecaptchaVerifier } from '../firebase'

var recaptcha = new RecaptchaVerifier('recaptcha')