"getFirebase() is not a function" after running npm install

Question

I have been working on a little react app and it has been going well, I thought but I am nowhere near the level of understanding I would like. I have run into a snag that leaves me dumbfounded. All was well in my code. I opened another app in my environment (Visual Studio) and it was not working properly so at the advice of the other programmer I executed npm Install. This is where my issues started. I do not know the exact cause but I fear my packages have been messed up. When I reopened my own app after this I started getting the error message in the title : "getFirebase() is not a function" in my debugger. Obviously lost of stuff stopped working as a result. I have tried to revert packages and install the correct version of stuff. According to npm list my installed versions are:

"firebase": "6.6.1",
"react-redux-firebase": "2.4.1",
"redux-firestore": "^0.9.0",

I have googled myself silly with this, react-redux-firebase v3 seems to often cause this issue, but I do not have that. I no longer know where to keep looking, google is no help. Can one of you experts point me in the correct direction?

Below you will find my firebase config file, the index.js that uses it, the code for the actions that trigger the error and the page that triggers the action. Thank you all for your time!

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {createStore, applyMiddleware, compose} from 'redux';
import {Provider} from 'react-redux';
import rootReducer from './reducers/rootReducer';
import thunk from 'redux-thunk';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import fbConfig from './config/fbConfig'

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

const store = createStore(rootReducer, compose(
    applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
    reactReduxFirebase(fbConfig, { userProfile: 'users', useFirestoreForProfile: true, attachAuthIsReady: true }),
    reduxFirestore(fbConfig) // redux bindings for firestore
));

store.firebaseAuthIsReady.then(() => {
    ReactDOM.render(
        <BrowserRouter basename={baseUrl}>
    <Provider store={store}><App/></Provider>
  </BrowserRouter>,
        rootElement);

    registerServiceWorker();
});

fbConfig.js

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

var firebaseConfig = {
    apiKey: "my valid but secret key",
    authDomain: "my domain",
    databaseURL: "my url",
    projectId: "my projectId",
    storageBucket: "",
    messagingSenderId: "some number",
    appId: "some other number"
  };

    // Initialize Firebase
firebase.initializeApp(firebaseConfig);
//const auth = firebase.auth();
firebase.firestore().settings({ });

export default firebase;

authActions.js

import { sendObjectToApi } from '../functions/fetching';

export const signIn = (credentials) => {
    return (dispatch, {getFirebase}) => {
        const firebase = getFirebase();
        console.log(firebase);
        firebase.auth().signInWithEmailAndPassword(
            credentials.email,
            credentials.password
        ).then(() => {
            dispatch({ type: 'LOGIN_SUCCESS' });
        }).catch((err) => {
            dispatch({ type: 'LOGIN_ERROR', err });
        });

    }
}

export const signOut = () => {
    return(dispatch, {getFirebase}) => {
        const firebase = getFirebase();
        console.log(firebase);
        firebase.auth().signOut().then(() => {
            dispatch({ type: 'SIGNOUT_SUCCES' });
        });
    }
}

export const signUp = (newUser) => {
    return (dispatch, {getFirebase}) => {
        const firebase = getFirebase();
        firebase.auth().createUserWithEmailAndPassword(newUser.email, newUser.password)
            .then((resp) => {
                newUser.firebaseId = resp.user.uid;
                sendObjectToApi('/api/User/AddUser', newUser, '');
            }).then(() => {
                dispatch({ type: 'SIGNUP_SUCCES' });
            }).catch(err => {
                dispatch({ type: 'SIGNUP_ERROR', err });
            });
    }
}

signedInLinks.js

import React from 'react';
import { connect } from 'react-redux'
import { signOut } from '../../Actions/authActions'
import { withRouter } from 'react-router';
import { NavLink } from 'react-router-dom';

const SignedInLinks = (props) => {
    return (
        <ul className="navbar-nav flex-grow">
            <li>
                <NavLink className="text-dark" to="/Login" onClick={props.signOut}>Log uit</NavLink>
            </li>
        </ul>);
};

const mapDispatchToProps = (dispatch) => {
    return {
        signOut: () => dispatch(signOut())
    };
};

export default withRouter(connect(null, mapDispatchToProps)(SignedInLinks));

score 0 · Answer 1 · answered Oct 07 '19 at 08:46

It took me 3 days of searching, but I have found the error of my ways which I will leave here for postperity.

During cleaning of my code I removed an variable that Visual Studio claimed was not used. Putting it back fixed the problem. The change is entirely in authActions.js where getState needed to be reinstated as shown below:

export const signIn = (credentials) => {
    return (dispatch, **getState**, {getFirebase}) => {
        const firebase = getFirebase();
        console.log(firebase);
        firebase.auth().signInWithEmailAndPassword(
            credentials.email,
            credentials.password
        ).then(() => {
            dispatch({ type: 'LOGIN_SUCCESS' });
        }).catch((err) => {
            dispatch({ type: 'LOGIN_ERROR', err });
        });

    }
}

I hope this helps someone.

"getFirebase() is not a function" after running npm install

1 Answers1