TypeError: Cannot read property 'firebase' of undefined (firebaseConnect)

[imhussein]

Iam running into problems when using firebaseConnnect() to authenticate to firebase and this is code

and this is an images showing the error

https://www.photobox.co.uk/my/photo/full?photo_id=501429776753

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store/store';

// Components
import Navbar from './components/layouts/Navbar';
import Login from './components/auth/Login';
import Register from './components/auth/Register';


// Main Style
import './App.css';

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Navbar branding="Bloggy" />
            <div className="container">
              <Switch>
                <Route exact path="/login" component={Login} />
                <Route exact path="/register" component={Register} />
              </Switch>
            </div>
          </div>
        </Router>
      </Provider>
    );
  }
}

export default App;

and this is Login.js

import React, { Component } from 'react';
import Input from '../helpers/Input';
import { Link } from 'react-router-dom';
import { firebaseConnect } from 'react-redux-firebase';
import PropTypes from 'prop-types';

class Login extends Component {
  constructor(){
    super();
    this.state = {
      email: '',
      password: '',
    }
  }

  onSubmit = e => {
    e.preventDefault();
  }

  onChange = e => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }

  render(){
    const { email, password } = this.state;
    return (
      <div className="form form__auth form__auth-login">
        <div className="text-center mb-2">
          <h2 className="heading-secondary">Login</h2>
        </div>
        <form onSubmit={this.onSubmit}>
          <Input type="email" id="email" placeholder="Email Address" onChange={this.onChange} label="Email Address" name="email" value={email} />
          <Input type="password" id="password" placeholder="Password" onChange={this.onChange} label="Password" name="password" value={password} />
          <input type="submit" value="Login" className="btn btn--primary btn--auth" />
        </form>
        <div className="text-center mt-2">
          <Link to="/register" className="form__link">Don't have an account yet? Sign Up</Link>
        </div>
      </div>
    );
  }
}

Login.propTypes = {
  firebase: PropTypes.object.isRequired,
}

export default firebaseConnect()(Login);

and here is my store setup

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

const firebaseConfig = {
....
};

const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true,
};

firebase.initializeApp(firebaseConfig);
const firestore = firebase.firestore();
const settings = { timestampsInSnapshots: true };
firestore.settings(settings);

const createStoreWithFirebase = compose(
  reactReduxFirebase(firebase, rrfConfig),
  reduxFirestore(firebase),
)(createStore);

const rootReducer = combineReducers({
  firebase: firebaseReducer,
  firestore: firestoreReducer,
});

const initialState = {};

const store = createStoreWithFirebase(rootReducer, initialState, compose(reactReduxFirebase(firebase), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));

export default store;

and this is Package.json

{
  "name": "bloggy",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "firebase": "^5.7.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-redux": "^6.0.0",
    "react-redux-firebase": "^2.2.4",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.1",
    "redux": "^4.0.1",
    "redux-firestore": "^0.6.0"
  },
  "scripts": {
    "start": "set PORT=3006 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

[prescottprue]

Are you using react-redux v6? It has a new api that is not yet supported as outlined #581.

[prescottprue]

Closing as a duplicate of #581 (which is now also closed).

v3.0.0-alpha has been released to the next tag (it can be installed with npm i --save react-redux-firebase@next). There is also the v3.0.0 section of the docs which explains how to install and includes a migration guide.

[eleventhaus]

I'm having a similar issue where withFirebase provides firebase but firebaseConnect() doesn't.

Using the Auth Recipe, I wired up my component:

import React from "react";
import PropTypes from "prop-types";
import { firebaseConnect, isEmpty, isLoaded } from "react-redux-firebase";
import { compose } from "redux";
import { connect } from "react-redux";

class Billing extends React.Component {
  render() {
    const { firebase, auth } = this.props;
    return (
      <div>
        <button // <GoogleButton/> button can be used instead
          onClick={() => firebase.login({ provider: "google", type: "popup" })}
        >
          Login With Google
        </button>
        <div>
          <h2>Auth</h2>
          {!isLoaded(auth) ? (
            <span>Loading...</span>
          ) : isEmpty(auth) ? (
            <span>Not Authed</span>
          ) : (
            <pre>{JSON.stringify(auth, null, 2)}</pre>
          )}
        </div>
      </div>
    );
  }
}

Billing.propTypes = {
  firebase: PropTypes.shape({
    login: PropTypes.func.isRequired
  }),
  auth: PropTypes.object
};

export default compose(
  firebaseConnect(), // withFirebase can also be used
  connect(({ firebase: { auth } }) => ({ auth }))
)(Billing);

but keep getting this error:

Thought it was something to do with my store:

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, Switch } from "react-router-dom";
import { Provider } from "react-redux";
import { applyMiddleware, compose, createStore } from "redux";
import reduxThunk from "redux-thunk";

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { ReactReduxFirebaseProvider } from "react-redux-firebase";
import { createFirestoreInstance } from "redux-firestore";

import indexRoutes from "routes/index.jsx";
import reducers from "reducers";
import hist from "./history";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducers,
  composeEnhancers(applyMiddleware(reduxThunk))
);

const fbConfig = {
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  databaseURL: "xxxxx",
  projectId: "xxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxxxx"
};

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

firebase.initializeApp(fbConfig);
firebase.firestore();

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

ReactDOM.render(
  <Provider store={store}>
    <ReactReduxFirebaseProvider {...rrfProps}>
      <Router history={hist}>
        <Switch>
          {indexRoutes.map((prop, key) => {
            return (
              <Route path={prop.path} component={prop.component} key={key} />
            );
          })}
        </Switch>
      </Router>
    </ReactReduxFirebaseProvider>
  </Provider>,
  document.getElementById("root")
);

but withFirebase using the same store provides firebase:

import React from "react";
import PropTypes from "prop-types";
import { isEmpty, isLoaded, withFirebase } from "react-redux-firebase";

const Billing = ({ firebase, auth }) => (
  <div>
    <button // <GoogleButton/> button can be used instead
      onClick={() => firebase.login({ provider: "google", type: "popup" })}
    >
      Login With Google
    </button>
    <div>
      <h2>Auth</h2>
      {!isLoaded(auth) ? (
        <span>Loading...</span>
      ) : isEmpty(auth) ? (
        <span>Not Authed</span>
      ) : (
        <pre>{JSON.stringify(auth, null, 2)}</pre>
      )}
    </div>
  </div>
);

Billing.propTypes = {
  firebase: PropTypes.shape({
    login: PropTypes.func.isRequired
  }),
  auth: PropTypes.object
};

export default withFirebase(Billing);

What am I doing wrong? Why isn't firebaseConnect() providing firebase?

[prescottprue]

@eleventhaus It looks like changes in 8b3b7f9 actually removed the prop during the internal renaming of the prop. I was under the impression the rename was just internal.

The test that was also modified only included verifying passing of colliding prop names that are used internally, it doesn't confirm the prop is passed (as it should).

Thanks for reporting, I'll look into making the fix and also adding a case in the tests for verifying the prop. I am also noting this in #613 so that anyone using the new prop name (_firebaseRef) is aware it will also remain available as the original firebase.

[eleventhaus]

Thanks for the quick turnaround! I updated react-redux-firebase to v3.0.0-alpha.9 but still can't get to the provided firebase prop. I tried using _firebaseRef as well.

[eleventhaus]

If withFirebase is used instead of firebaseConnect() everything works in both class and functional components.

[prescottprue]

@eleventhaus That is weird since I added a test for firebaseConnect and now things are being passed the same way as withFirebase as before. I'll look into it tomorrow.