React - Firebase - GoogleAuthProvider 不是构造函数答案

【问题标题】：React - Firebase - GoogleAuthProvider is not a constructorReact - Firebase - GoogleAuthProvider 不是构造函数
【发布时间】：2017-01-16 18:24:11
【问题描述】：

我正在尝试创建一个使用“使用 Google 登录”按钮来触发 signInWithPopup(provider) 的 React 应用程序。但是每次我调用new firebaseApp.auth.GoogleAuthProvider() 我的控制台都会返回一个错误。我只是想console.log()result。

错误

未捕获的 TypeError：_firebase_setup2.default.auth.GoogleAuthProvider 不是构造函数

firebase_setup.js

import * as firebase from 'firebase';

const firebaseConfig = {
  apiKey: "AIzaSyAKlWtFZvbvuNy2qC68Xt5xzaTQVyy9l2o",
  authDomain: "doordash-ff045.firebaseapp.com",
  databaseURL: "https://doordash-ff045.firebaseio.com",
  storageBucket: "doordash-ff045.appspot.com",
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

export default firebaseApp;

登录.js

import React, { Component } from 'react';
import { browserHistory } from 'react-router';
import firebaseApp from '../../../services/firebase_setup';

export default class Login extends Component {

  componentDidMount() {
    firebaseApp.auth().onAuthStateChanged(user => {
      if (user) {
        console.log(user);
        browserHistory.push('/profile');
      }
    });
  }

  authenticate() {
    var provider = new firebaseApp.auth.GoogleAuthProvider();
    provider.addScope('profile');
    provider.addScope('email');

    firebaseApp.auth().signInWithPopup(provider)
      .then(result => {
        console.log(result);
      })
  }

  render() {
    return (
      <div>
        <h1>Login Page</h1>
        <button onClick={this.authenticate.bind(this)}>
          Login with Google
        </button>
      </div>

    );
  }
}

我将不胜感激任何对此问题的见解！我查阅了许多教程，但在尝试声明 provider 变量时总是遇到同样的错误。

【问题讨论】：

前段时间有类似的问题，我的问题是使用旧文档和最新版本的 firebase api，它不再支持构造函数new Firebase...
@Davidlrnt 感谢您的快速回复！不过我正在使用新文档。
console.log(typeof firebaseApp.auth.GoogleAuthProvider) 寻找线索。
@JaredSmith 谢谢你，但不幸的是我得到了和以前一样的错误
@szier 你必须把它放在 before 你尝试调用它。一旦抛出错误，除非它被捕获，否则该脚本中的其余代码将不会运行。

标签： javascript reactjs firebase firebase-authentication

【解决方案1】：

您将命名空间与实例混合在一起：firebaseApp 只是配置数据的容器。这不是您创建提供程序实例的方式。

正确的做法是：

var provider = new firebase.auth.GoogleAuthProvider();

【讨论】：

这是否适用于库 react-native-firebase？

【解决方案2】：

我遇到了这个“不是构造函数”问题以及其他一些错误。我正在做这样的事情：

var googleProvider = new myApp.auth.GoogleAuthProvider();

应该是什么时候

var googleProvider = new firebase.auth.GoogleAuthProvider();

我还在用这样的名称初始化我的应用程序：

var myApp = firebase.initializeApp(appConfig, "App");

这没有初始化默认应用程序并给了我更多错误。我应该这样做（因为我只有一个应用程序）

var myApp = firebase.initializeApp(appConfig);

【讨论】：

【解决方案3】：

我在尝试存储对 firebase.auth 的引用以在多个函数中使用时遇到了这个问题。

我发现 GoogleAuthProvider 函数是 auth firebase 函数的属性，而 signInWithPopup、onAuthStateChanged、signOut 等在 firebase.auth() 函数返回的 firebase.auth.Auth 上。

这就是我的代码现在的样子。

    //constructor
    this.auth = firebase.auth;
    this.auth_ = firebase.auth();
    ...
    //sign in function
    var provider = new this.auth.GoogleAuthProvider();
    this.auth_.signInWithPopup(provider);

https://codelabs.developers.google.com/codelabs/firebase-web/#5 的示例代码是正确的，但是当您将此代码粘贴到解决方案中并开始使用它时，很难注意到差异。

【讨论】：

【解决方案4】：

我也遇到了同样的问题，幸运的是现在正在工作！

把它放在 firebase.js 中

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

并在 login.js 中导入

import {firebaseApp,provider} from '../../../services/firebase_setup';

【讨论】：

【解决方案5】：

您好，在您的 login.js 中修改 firebase 导入

尝试替换这个：

import firebaseApp from '../../../services/firebase_setup';

为此：

import firebaseApp from "firebase/app";

希望能解决问题。祝你有美好的一天！

【讨论】：

【解决方案6】：

您从 firebase.js 导出的不是 firebaseApp。

而不是“firebase”中的那个 imoprt firebase //实际的 sdk

然后这样做 const auth = firebase.auth();

在 firebase.js 文件上并导出它

然后在 app.js 上只需导入身份验证。

这就是我的出路

【讨论】：