firebase.database() is not a function error in react

Question

To give some context i am trying to setup my react app with redux-toolkit and react-redux-firebase (need firebase realtime db).

i followed the react-redux-firebase readme to create this file


import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { store } from "./app/store";
import { Provider } from "react-redux";
import * as serviceWorker from "./serviceWorker";
import { initializeApp } from "firebase/app";  
import "firebase/database"; // to enable using firebase RTD
import { ReactReduxFirebaseProvider } from "react-redux-firebase";

const fbConfig = {
    apiKey: "**",
    authDomain: "**",
    projectId: "**",
    storageBucket: "**",
    messagingSenderId: "**",
    appId: "**",
    measurementId: "**",
    databaseURL: "firebase-rtdb-url**",
};

let firebase = initializeApp(fbConfig);

const rrfConfig = {
    userProfile: "users",
};

const rrfProps = {
    firebase,
    config: rrfConfig,
    dispatch: store.dispatch,
};

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <ReactReduxFirebaseProvider {...rrfProps}>
                <App />
            </ReactReduxFirebaseProvider>
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

store.js is just using redux toolkit to create and export a store.


import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";
import { firebaseReducer } from "react-redux-firebase";

export const store = configureStore({
    reducer: {
        counter: counterReducer,
        firebase: firebaseReducer,
    },
});

and also using the demo code given on react-redux-firebase website

import React from "react";
import { useFirebase } from "react-redux-firebase";

export default function Todos() {
    const firebase = useFirebase();

    function addSampleTodo() {
        const sampleTodo = { text: "Sample", done: false };
        return firebase.push("todos", sampleTodo);
    }

    return (
        <div>
            <h1>New Sample Todo</h1>
            <button onClick={addSampleTodo}>Add</button>
        </div>
    );
}

when i click on "add" button this is the exception i get Screenshot from 2021-09-07 23-31-08

please let me know if anything else is needed to improve the question. will appreciate any help with this ?

thanks in advance

Dharmaraj · Accepted Answer · 2021-09-08 04:37:35Z

5

Since you are using the new Modular SDK, make sure you use it for all the Firebase services:

import "firebase/database"; // Older name-spaced version

The new Modular syntax for realtime database looks like:

import { getDatabase } from "firebase/database" 

let firebase = initializeApp(fbConfig);

const db = getDatabase(firebase)

function addSampleTodo () {
   // Get a key for a new ToDo.
  const newTodoKey = push(child(ref(db), 'posts')).key;

  return update(ref(db), { updates['/todos/' + newTodoKey]: todoData });
}

You can find more details about it in the documentation. This is valid if you use the Firebase JS SDK v9+.

Alternatively, you can change the imports to compat version to keep using existing syntax.

import firebase from "firebase/compat/app"
import "firebase/compat/database"
// import "firebase/compat/[SERVICE_NAME]"

// Also use the name-spaced syntax everywhere else then
firebase.initializeApp(fbConfig);

edited Sep 8, 2021 at 4:37

answered Sep 7, 2021 at 18:13

Dharmaraj

51.3k8 gold badges67 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pg07 Over a year ago

thanks that clears up a lot of things. but as you see i am using react redux firebase and it internally is using firebase.database() and I'm not the one directly interacting with it, the library does (see var rrfConfig), so how do i make it work ?

Dharmaraj Over a year ago

@pg07 If it uses Firebase JS SDK internally then I'd recommend changing the imports to compat. import firebase from "firebase/compat/app" and import "firebase/compat/database"

Collectives™ on Stack Overflow

firebase.database() is not a function error in react

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related