個人開発

'firebase/app' does not contain a default export

import firebase from 'firebase/compat/app';

REACT_APP_FIREBASE_APIKEY=""
REACT_APP_FIREBASE_DOMAIN=""
REACT_APP_FIREBASE_DATABASE=""
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_SENDER_ID=""
REACT_APP_FIREBASE_APP_ID=""

import 'firebase/compat/auth';
~
export const auth = firebaseApp.auth();

const [email, setEmail] = useState('')
~
<input id="email" type="email" value={email} onChange={(e) => {setEmail(e.target.value)}} placeholder="email"/>

import { GoogleAuthProvider } from 'firebase/auth';
〜
export const provider = new GoogleAuthProvider();

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

function LoginPage() {

    const signInGoogle = () => {
        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);
            // ...
        });
    }

    return(
        <>
            <h1>Loginページ</h1>
            <form>
              <button type="button" onClick={signInGoogle}>Google認証</button>
            </form>
        </>
    )
};

//関数定義
    const signInEmail = async () => {
        await auth.signInWithEmailAndPassword(email, password)
        alert("ログインしました")
    }

//呼び出し
<form>
<h2>ログイン</h2>
<input id="username" type="text" value={username} onChange={(e) => {setUsername(e.target.value)}} placeholder="username"/><br/>
<input id="email" type="email" value={email} onChange={(e) => {setEmail(e.target.value)}} placeholder="email"/><br/>
<input id="password" type="password" value={password} onChange={(e) => {setPassword(e.target.value)}} placeholder="password"/>
<button type="button" onClick={
    async () => {
        try {
            await signInEmail()
            } catch (err) {
                alert(err.message)
            }
            }}>Sign Up
</button><br/><br/>
</form>

        auth.onAuthStateChanged((authUser) => {
            dispatch(
                login({
                    uid: authUser.uid,
                    displayName: authUser.displayName
                })
            )
        })

const loginUser = useSelector(state => state.users)