reactjs - _firebase_js__WEBPACK_IMPORTED_MODULE_1__.firebase.auth.GoogleAuthProvider is not a constructor

Question

I'm trying to build authentication into my website but I've run into an issue I haven't seen anywhere else so I decided to ask it here. Web browser returns this error: _firebase_js__WEBPACK_IMPORTED_MODULE_1__.firebase.auth.GoogleAuthProvider is not a constructor.

My firebase.js file looks like this:

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

And the file I'm doing login in looks like this:

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>
    }
}

Thank you for your answers.

question from:https://stackoverflow.com/questions/65859669/firebase-js-webpack-imported-module-1-firebase-auth-googleauthprovider-is-no

Answer 1

This solution works for me:

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

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

   return fb;
}