Невозможно прочитать свойства у undefined (GoogleAuthProvider)?

Question

[dineroL33]

Начал изучать React & TS, Пытаюсь добавить авторизацию через Google с помощью firebase(версия: 9.6.11), но получаю ошибку при попытке авторизоваться:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'GoogleAuthProvider')
    at login (Form.tsx:13:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
    at executeDispatch (react-dom.development.js:8243:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
    at processDispatchQueue (react-dom.development.js:8288:1)
    at dispatchEventsForPlugins (react-dom.development.js:8299:1)
    at react-dom.development.js:8508:1

firebase-config:

import {initializeApp} from "firebase/app"
import {getFirestore} from "firebase/firestore"
import firebase from "firebase/compat/app";
import {getAuth} from "firebase/auth"
import {createContext} from "react";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};
export const Context = createContext<any|null>(null);

export const app = initializeApp(firebaseConfig);
const db = getFirestore(app)
export const auth = getAuth(app);
export {db};

Index:

import React, {createContext} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter as Router} from "react-router-dom";
import './firebase_config'
import {app, auth, Context} from './firebase_config'
import {db} from './firebase_config'


const root = ReactDOM.render(
    <Router>
        <Context.Provider value={{
            app,
            auth,
            db
        }}>
            <App/>
        </Context.Provider>
    </Router>,
    document.getElementById('root') as HTMLElement
);

Form:

import React, {FC, useContext} from 'react';
import {Context} from "../firebase_config";
import firebase from 'firebase/compat/app';

interface IForm {
    title: string;
}

const Form: FC<IForm> = ({title}) => {
    const {auth} = useContext(Context)

    const login = async () => {
        const provider = new firebase.auth.GoogleAuthProvider() // creating object via constructor
        const {user} = await auth.signInWithPopup(provider);
        console.log(user)
    }

    return (
        <section className="vh-100 bg-red-salsa">
            <div className="container py-5 h-100">
                <div className="row d-flex justify-content-center align-items-center h-100">
                    <div className="col-12 col-md-8 col-lg-6 col-xl-5">
                        <div className="card shadow-2-strong" style={{borderRadius: "1rem"}}>
                            <div className="card-body p-5 text-center">
                                <h3 className="mb-5">{title}</h3>
                                <div className="form-outline mb-4">
                                    <button className="btn btn-primary btn-lg btn-block bg-dark-purple"
                                            type="submit" onClick={login}
                                    >
                                        {title}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default Form;

Comments

[AlexVWill]

Пытаюсь добавить авторизацию через Google с помощью firebase

А с какой целью, если Google дает свой, удобный и безопасный API для этой цели, который отлично работает в Android?

[Nikolaj Alyabiev]

Проверь пропсы через дебагер, где то недоходит до логина