Аутентификация в Firebase Ожидается, что слушатель onClick будет функцией, вместо этого получит значение типа object

Question

Во время настройки Firebase Auth на моем проекте React. Я не могу сделать так, чтобы Auth Pop-up срабатывал при нажатии кнопки.

Либо выдает ошибку в консоли после нажатия кнопки, либо он автоматически открывает аутентификацию после обновления страницы (Ожидается, что onClick слушатель будет функцией, вместо этого получил значение типа object.)

// Initialize Firebase
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
const config = {
  apiKey: "myKeyHere",
  authDomain: "domain",
  databaseURL: "url",
  projectId: "idb",
  storageBucket: "bucket",
  messagingSenderId: "id"
};
firebase.initializeApp(config);
export const firestore = firebase.firestore();
export const auth = firebase.auth();

export const provider = new firebase.auth.GoogleAuthProvider();
export const signInWithGoogle = () => auth.signInWithPopup(provider);

const settings = { timestampsInSnapshots: true };
firestore.settings(settings);

export default firebase;

А вот и мой компонент:

import React, { Component } from "react";
import { connect } from "react-redux";
import signInWithGoogle from "../../firebase";

    class Header extends Component {
      constructor(props) {
        super(props);
      }
      render() {
        console.log(this.props);
        return (
          <nav className="header">
            <button onClick={signInWithGoogle}>Sign in</button>
          </nav>
        );
      }
    }
    const mapStateToProps = state => state;

    export default connect(mapStateToProps)(Header);

Как видите, кнопка «Войти» должна запускать функцию стрелки signInWithGoogle из Firebase, но при нажатии выдает ошибку.

Answer 1

Я полагаю, что проблема в том, что вы импортируете экспорт по умолчанию из '../../firebase', который является 'firebase' вместо функции входа.

Чтобы исправить это, вам просто нужнодобавить фигурные скобки {} в импорт, чтобы импортировать именованный экспорт вместо значения по умолчанию:

import { signInWithGoogle } from "../../firebase";