"firebaseApp.auth.RecaptchaVerifier is not a constructor" error when using firebase phone authentication in Reactjs

Question

I am importing 'firebaseApp' from a file where I have done all the setup of firebase and I have implemented email, google and Facebook authentication but when I am implementing the phone number auth the ReCaptcha is not a constructor I am using ReactJs functional component. Is there any way of implementing phone number auth without ReCaptcha or if not how can I fix the error.

Setup of firebase

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

    // Web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: ""
    };

    // Initialize Firebase
    export const firebaseApp = firebase.initializeApp(firebaseConfig);
    export const auth = firebase.auth();
    export const db = firebase.firestore();
    export const google_provider = new firebase.auth.GoogleAuthProvider();
    export const facebook_provider = new firebase.auth.FacebookAuthProvider();

This is the place I am taking the number as user input and sending the OTP for verification but the sample code number is hardcoded.

import { firebaseApp, auth } from '../../../firebase/firebasesetup'

 function Form() {
    const setuprecaptcha = () => {
    window.recaptchaVerifier = new firebaseApp.auth.RecaptchaVerifier('recaptcha-container',
        {
            'size': 'invisible',
            'callback': function (response) {
            console.log("captcha resolved");
               // sendsms();
            }
        });
     } 
  const sendsms = () => {
    setuprecaptcha();
    var phoneNumber = '+918220310506';
    var appVerifier = window.recaptchaVerifier;
    auth.signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(function (confirmationResult) {
            
            window.confirmationResult = confirmationResult;
        }).catch(function (error) {
            alert("not sent")
        });

  }
  return (
      <input type="text" placeholder="Mobile" value={mob} 
        onChange={e => setMob(e.target.value)} />
      <div id="recaptcha-container"></div>
      <button onClick={sendsms} id='sign-in-button'>Send otp</button>
      )

 }

export default Form

Answer 1

Ok, so I am answering My own question. This kind of looks Weird but still if anyone of you faces the same problem as mine.

2 things I need to solve in the firebase_setup file and add the main function in React functional component. (Total 3 updates)

firebase_setup file

first import firebase from 'firebase'; and not import firebase from 'firebase/app';

second firebase.initializeApp(firebaseConfig); export const firebaseApp = firebase

React functional component

import { firebaseApp} from './firebase_setup';

const sendsms = () => {

//If you want to make the recaptcha invisible
var recaptcha = new firebaseApp.auth.RecaptchaVerifier('recaptcha-container', {
                      'size': 'invisible'
                      });
//If you want to make the recaptcha visible
var recaptcha = new firebaseApp.auth.RecaptchaVerifier('recaptcha-container');

//Your phone number with the country code
var number = '+**********';
//actual code begins here
auth.signInWithPhoneNumber(number, recaptcha).then(function (e) {
        var code = prompt("enter the code sent to your mobile number");

        if (code === null) return;

        e.confirm(code).then(function (result) {

            alert(result.user + ' verified ')

        }).catch(function (error) {
            alert('Could not verify,Please try again');
        });

    }).catch(function (error) {
        alert('Please try again.We were unable to reach your phone.Select the           correct code and the phone number');
    });

}