here is where i am getting the error:

import {Button, ThemeProvider} from "@mui/material";

import firebase from "firebase/compat/app"
import "firebase/compat/auth"

const auth = firebase.auth();

function LoginForm(props) {

    function loginHandler() {

    }

    function loginWithGoogleHandler() {
        const provider = new firebase.auth.GoogleAuthProvider();
        auth.signInWithPopup(provider);
    }

    return (

        <ThemeProvider theme={props.theme}>
            <Button variant="contained" color="primary" onClick={loginHandler}>
                LOGIN
            </Button>
            <Button variant="contained" color="primary" onClick={loginWithGoogleHandler}>
                LOGIN WITH GOOGLE?
            </Button>
        </ThemeProvider>

    );

}

export default LoginForm;

It does not say which line the error is one. I looked up some other solutions and they said that you were defining something before the other thing but i didnt understand it very well and those solutions contained const db = firebase.firestore(); so i think its something else that is wrong with my code.