CODEWITHSUNDEEP
reactjsfirebasefirebase-realtime-database
mekings
mekings

Reputation: 421

Firebase database not a function error in ReactJS application

Hello guys I keep getting a firebase.database() is not a function error when trying to use firebase from a reactjs app

Here is how I am initializing my firebase from a file called Firebase.js

import * as firebase from "firebase";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

class Firebase {
    constructor() {
        this.firebase = firebase.initializeApp(firebaseConfig);
    }
}

export default Firebase;

Here is my FirebaseContext.js file

import React from "react";

const FirebaseContext = React.createContext(null);

export const FirebaseProvider = FirebaseContext.Provider;
export default FirebaseContext;

Now in my index.js file I have this

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import App from './pages/App';
import {BrowserRouter} from 'react-router-dom'
import Firebase from "./backend/configs/firebase";
import {FirebaseProvider} from "./contexts/FirebaseContext";

ReactDOM.render(
    <React.StrictMode>
        <FirebaseProvider value={new Firebase()}>
            <BrowserRouter>
                <App/>
            </BrowserRouter>
        </FirebaseProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

Now, if I call the firebase object in one of my Functional Components like this 

import FirebaseContext from "../contexts/FirebaseContext";
import React, {useContext, useEffect} from 'react';

export default function Dashboard() {
    const firebase = useContext(FirebaseContext);
    firebase
        .database()   //Firebase is not a function error happens here
        .ref("updates")
        .once('value')
        .then(function (snapshot) {
        });
}

In my Dashboard Component above I keep getting errors that firebase.database() is not a function.Please help. Thank you

Upvotes: 1

Views: 250

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58523

I think this is how it should look like :

const { firebase } = useContext(FirebaseContext);

Upvotes: 1

Related Questions