Uncaught TypeError: Cannot read properties of undefined (reading 'firebase_')

Viewed 150

I don't know why I've been having so much trouble with this, it seems like it should be so simple.

This error is being run while trying to set up react-redux-firebase. I've been through tutorial after tutorial, read article after article and even tried to use the rrf migration guide and the firebase docs and I cannot figure out why this error is being returned.

please forgive my code. it's not pretty at the moment after several attempts to get this tor work.

Here's my app.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import { Router, Switch, Route } from "react-router-dom";
import thunk from "redux-thunk";
import {
  createFirestoreInstance,
  getFirestore,
  reduxFirestore,
} from "redux-firestore";
import { ReactReduxFirebaseProvider, getFirebase } from "react-redux-firebase";
import firebase from "firebase/app";

import firebaseConfig from "./config/firebaseConfig";
import rootReducer from "./reducers";


import "./style/main.scss";

import history from "./history";

import App from "./components/app";
import StartMenu from "./components/startMenu/StartMenu";
import HostMenu from "./components/hostMenu/HostMenu";
import JoinMenu from "./components/joinMenu/JoinMenu";

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
    reduxFirestore(firebase, firebaseConfig)
  )
);

const rrfProps = {
  firebase,
  config: {
    userProfile: "users",
  },
  dispatch: store.dispatch,
  createFirestoreInstance,
};

function main() {
  ReactDOM.render(
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <Router history={history}>
          <App>
            <Switch>
              <Route path='/' exact component={StartMenu} />
              <Route path='/host' exact component={HostMenu} />
              <Route path='/join' exact component={JoinMenu} />
            </Switch>
          </App>
        </Router>
      </ReactReduxFirebaseProvider>
    </Provider>,
    document.querySelector(".app-wrapper")
  );
}

document.addEventListener("DOMContentLoaded", main);

my rootReducer.js

import { combineReducers } from "redux";
import { reducer as form } from "redux-form";

import { reducer as firebase } from "react-redux-firebase";

import user from "./userReducer";

const rootReducer = combineReducers({
  form,
  firebase,
  user,
});

export default rootReducer;

and here's my firebaseConfig.js

import firebase from "firebase/app";
import "firebase/database";

const firebaseConfig = {...};

try {
  firebase.initializeApp(firebaseConfig);
} catch (err) {}

export default firebaseConfig;

Here's the full error:

Uncaught TypeError: Cannot read properties of undefined (reading 'firebase_')
    at enhancer.js:30:1
    at redux.js:629:1
    at createStore (redux.js:79:1)
    at Object../src/bootstrap.js (bootstrap.js:18:15)
    at __webpack_require__ (bootstrap:725:1)
    at fn (bootstrap:100:1)
    at Object.1 (app.js:89329:18)
    at __webpack_require__ (bootstrap:725:1)
    at bootstrap:792:1
    at bootstrap:792:1
(anonymous) @ enhancer.js:30
(anonymous) @ redux.js:629
createStore @ redux.js:79
./src/bootstrap.js @ bootstrap.js:18
__webpack_require__ @ bootstrap:725
fn @ bootstrap:100
1 @ app.js:89329
__webpack_require__ @ bootstrap:725
(anonymous) @ bootstrap:792
(anonymous) @ bootstrap:792

Thank you all so much for any and all help this community provides. You're the best!

Please let me know if you need any more information and/or files!

0 Answers
Related