_firebase_js__WEBPACK_IMPORTED_MODULE_1__.firebase.auth.GoogleAuthProvider 不是构造函数

Question

我正在尝试在我的网站中构建身份验证，但我运行遇到了一个我在其他任何地方都没有见过的问题，所以我决定在这里提问。 Web 浏览器 returns 此错误： _firebase_js__WEBPACK_IMPORTED_MODULE_1__.firebase.auth.GoogleAuthProvider is not a constructor.

我的 firebase.js 文件如下所示：

import fb from 'firebase/app';
require('firebase/firestore');
require('firebase/auth');
export const firebase = !fb.apps.length? fb.initializeApp({appConfig})  : fb.app();

我正在登录的文件如下所示：

import React from 'react';
import { Component } from 'react';
import { firebase } from './firebase.js';
class SignIn extends Component {
    state = {
        email: 'email',
        password: 'password',
    };
    db = firebase.firestore();
    auth = firebase.auth();
    SignInWithGoogle = () => {
        var provider = new firebase.auth.GoogleAuthProvider();
        this.auth.signInWithPopup(provider);
    };
    render() {
        return (
                <div>
                    <button onClick={this.SignInWithGoogle}>Google</button>
                </div>
    }
}

感谢您的回答。

Answer 1

这个解决方案适合我：

import fb from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

export default function firebase() {
   if(!fb.apps.length)
      fb.initializeApp(appConfig);
   }

   return fb;
}

Answer 2

我已通过将 firebase.js 文件更改为

来修复它

import fb from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const firebase = fb;
!firebase.apps.length
    ? fb.initializeApp(appConfig)
    : fb.app();
export { firebase };

我需要导出 firebase 对象本身而不是 fb.inicializeApp()

的输出

_firebase_js__WEBPACK_IMPORTED_MODULE_1__.firebase.auth.GoogleAuthProvider 不是构造函数

_firebase_js__WEBPACK_IMPORTED_MODULE_1__.firebase.auth.GoogleAuthProvider is not a constructor

google-authentication

firebase

reactjs