Firebase Error: not working, what to do?

Question

I am trying to create a ReactJs App and using Firebase, react-redux and react-redux-firebase for the first time as database and authentication. I am using and following the official documentation to create my redux store but I'm getting this weird error:

Error:

Uncaught TypeError: (0 , react_redux_firebase__WEBPACK_IMPORTED_MODULE_0__.reactReduxFirebaseProvider) is not a function
    at Module../src/store.js (store.js:55:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/App.js (bundle.js:23:64)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/index.js (SideBar.js:12:1)
    at Module.options.factory (react refresh:6:1)

Here is my store.js file:

import { createStore, combineReducers, compose } from "redux";
import firebase from "firebase";
import "firebase/firestore";
import {
  reactReduxFirebaseProvider,
  firebaseReducer,
} from "react-redux-firebase";
import {reduxFirestore, firestoreReducer } from "redux-firestore";


import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

//Reducers
//@todo

const firebaseConfig = {
  apiKey: "...myapikey...",
  authDomain: "mydomain.firebaseapp.com",
  projectId: "myproject-a6",
  storageBucket: "myproject-a6.appspot.com",
  messagingSenderId: "921873652157",
  appId: "1:921873652157:web:7bc3d3b585f80cc2e752d4",
  measurementId: "G-NEQB94QJ1V",
};

react-redux-firebase config
 const rrfConfig = {
   userProfile: "users",
   useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB
 };

 const rrfProps = {
   firebase,
   config: rrfConfig,
   dispatch: store.dispatch,
   // createFirestoreInstance, // <- needed if using firestore
 };   


firebase.initializeApp(firebaseConfig);   


const firestore = firebase.firestore();


const rootReducer = combineReducers({
  firebase: firebaseReducer,
  firestore: firestoreReducer, // <- needed if using firestore
});


const initialState = {};
const store = createStore(
  rootReducer,
  initialState,
  compose(
    reactReduxFirebaseProvider(firebase),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

following is my App.js:

import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import AppNavbar from "../src/components/layouts/AppNavbar";
import DashBoard from "../src/components/layouts/DashBoard";

import { Provider } from "react-redux";
import { ReactReduxFirebaseProvider } from "react-redux-firebase";
import store from "./store";

function App() {
  return (
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <Router>
          <div className="App">
            <AppNavbar />
            <div className="container">
              <Routes>
                <Route exact path="/" element={<DashBoard />} />
                <Route exact path="/dashboard" element={<DashBoard />} />
              </Routes>
            </div>
          </div>
        </Router>
      </ReactReduxFirebaseProvider>
    </Provider>
  );
}

export default App;

Please check and try to help me. My app is not running right now.

Firebase Error: not working, what to do?

0 Answers0