TypeError: _firebase2.default.ref is not a function

Question

I'm new to ReactJS and building an expenses application. I have a Redux store to store expenses.

I have a Firebase Database connected and I'm now trying to add Google Authentication that Firebase provides. Here's my firebase code from firebase.js

import * as firebase from 'firebase';

const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID
};

firebase.initializeApp(firebaseConfig);

const database = firebase.database();
const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

export { firebase, database, googleAuthProvider as default };

The behavior is defined in auth.js

import { firebase, googleAuthProvider } from '../firebase/firebase';

export const startLogin = () => {
  return () => {
    return firebase.auth().signInWithPopup(googleAuthProvider);
  };
};

The component I'm trying to render is LoginPage.js

import React from 'react';
import { connect } from 'react-redux';
import { startLogin } from '../actions/auth';

export const LoginPage = ({ startLogin }) => {
    return (
        <div>
            <h2>Log in Page</h2>
            <button onClick={startLogin}>Log in here</button>
        </div>
    );
};

const mapDispatchToProps = (dispatch) => ({
    startLogin: () => dispatch(startLogin())
});

export default connect(undefined, mapDispatchToProps)(LoginPage);

The error I see is TypeError: _firebase2.default.ref is not a function. When I use the console to try and look where the error comes up is in another file that defines the behavior of my expenses, expenses.js

import { v1 as uuidv1 } from 'uuid';
import database from '../firebase/firebase';

export const addExpense = (expense) => {
    return {
        type: 'ADD_EXPENSE',
        expense: expense
    };
};

export const startAddExpense = ( expenseData = {} ) => {
    return (dispatch) => {
        const {
            description = '', 
            note = '', 
            amount = 0, 
            createdAt = 0
        } = expenseData;
        const expense = { description, note, amount, createdAt };

        return database.ref('expenses').push(expense).then((ref) => {
            dispatch(addExpense({
                id: ref.key,
                ...expense
            }));
        });
    };
};

export const removeExpense = ({ id } = {}) => {
    return {
        type: 'REMOVE_EXPENSE',
        id: id
    };
};

export const startRemoveExpense = ({ id } = {}) => {
    return (dispatch) => {
        return database.ref(`expenses/${id}`).remove()
        .then(() => {
            dispatch(removeExpense({ id }));
        });
    };
};

export const editExpense = (id, updates) => {
    return {
        type: 'EDIT_EXPENSE',
        id: id,
        updates: updates  
    };
};

export const startEditExpense = (id, updates) => {
    return (dispatch) => {
        return database.ref(`expenses/${id}`).update(updates)
        .then(() => {
            dispatch(editExpense(id, updates));
        });
    };
};

export const setExpenses = (expenses) => {
    return {
        type: 'SET_EXPENSES',
        expenses: expenses
    };
};

export const startSetExpenses = () => {
    return (dispatch) => {
        return database.ref('expenses')
        .once('value')
        .then((snapshot) => {
            const expenses = [];

            snapshot.forEach((obj) => {
                expenses.push({
                    id: obj.key,
                    ...obj.val()
                }); 
            });

            dispatch(setExpenses(expenses));
        });
    };
};

Before adding connect to LoginPage and simply displaying it, the app works properly.

Attached are screenshots of the error: Upon clicking where the error comes from, here's the place:

Answer 1

In firebase.js , with the below line of code, you are doing named export for firebase and database and default export for googleAuthProvider.

export { firebase, database, googleAuthProvider as default };

Problem:

1. In auth.js, you are importing googleAuthProvider as named export which is incorrect.

   import { firebase, googleAuthProvider } from '../firebase/firebase';
   

2. In expenses.js you are importing database as default which is incorrect.

   import database from '../firebase/firebase';
   

Solution:

1. In auth.js, do default import for googleAuthProvider

   import googleAuthProvider, { firebase } from '../firebase/firebase';
   

2. In expenses.js do named export for database

   import { database } from '../firebase/firebase';