prescottprue / react-redux-firebase

Redux bindings for Firebase. Includes React Hooks and Higher Order Components.
https://react-redux-firebase.com
MIT License
2.55k stars 559 forks source link

firebase.database() is not a function in v9 firebase #1134

Closed pg07codes closed 2 years ago

pg07codes commented 2 years ago

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 from "firebase/app" given in readme doesnt work now
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 this is the exception i get Screenshot from 2021-09-07 23-31-08

will appreciate any help with this ?

TIA

pg07codes commented 2 years ago

i resolved the above issue using compat version and not the recently released moduler firebase sdk.

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

using the compat version to keep using the existing api seems to be the only way for now.