未捕获的类型错误：_firebase__WEBPACK_IMPORTED_MODULE_0__.app.auth 不是 function

Question

ok so ive been building a discord clone with react redux, right now im stuck on the sign in page. it keeps giving me this error "Uncaught TypeError: firebase__WEBPACK_IMPORTED_MODULE_0 _.app.auth is not a function" heres my code in firebase.js

import { initializeApp } from "firebase/app";
import { getDatabase } from 'firebase/database';
import { getAuth } from "firebase/auth"
import { GoogleAuthProvider } from "firebase/auth";


const firebaseConfig = {
  apiKey: "AIzaSyD0RxEfG1qZ4Qsoelw5E6J0rIaJSP4BbXQ",
  authDomain: "diacromb.firebaseapp.com",
  projectId: "diacromb",
  storageBucket: "diacromb.appspot.com",
  messagingSenderId: "237625612351",
  appId: "1:237625612351:web:2527b57f858d5a4688008a",
  measurementId: "G-3DEREK47Q2"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

const db = getDatabase(app);
const auth = getAuth();



const provider = new GoogleAuthProvider();

export {auth , app };
export {provider};
export default db;  

heres my code for Login.js

import { Button } from '@material-ui/core'
import {  auth, app } from './firebase'
import { provider } from './firebase'
import { signInWithPopup } from "firebase/auth"

import React from 'react'
import './Login.css'


function Login() {
   /* const signIn = () =>{
        const googleAuthProvider = new GoogleAuthProvider();
        app.auth().signInWithPopup(googleAuthProvider);    
       } */

        const signIn = ()=>{
            var google_provider = provider;
            
            app.auth().signInWithPopup(provider)
            .then((re)=>{
                console.log(re)
            })
            .catch((err)=>{
                console.log(err) 
            }) 
        }
    

    return (
        <div className='login'>
            <h2> I am the login page</h2>
            
          
            <Button onClick={signIn}>Sign In</Button>
        </div>
    );
    }



export default Login

I have no idea whats going on, ive read some other posts and people are saying to install older versions of firebase, I tried to do that and it still didnt work. Ive been stumped on this for nearly 2 days now

Answer 1

I assume you are using firebase 9. there you have to use js modules.

https://firebase.google.com/docs/web/modular-upgrade

import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    // The signed-in user info.
    const user = result.user;
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });