React-redux-firebase: Error: Firebase instance does not yet exist. Check your compose function.

[jalvarson]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When following the migration guide (I changed everything in the diff) and ensuring that I upgraded my react-redux-firbase package to v3.0.0-alpha, those changes lead to the following error:
Error: Firebase instance does not yet exist. Check your compose function.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './store/reducers/rootReducer'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { createFirestoreInstance, getFirestore } from 'redux-firestore';
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase';

const fbConfig = {
  apiKey: "AIzaSyDI4hlkLl-yoYPpqQ2kwlUulFERxmfYMu8",
  authDomain: "retrooo-a66b6.firebaseapp.com",
  databaseURL: "https://retrooo-a66b6.firebaseio.com",
  projectId: "retrooo-a66b6",
  storageBucket: "retrooo-a66b6.appspot.com",
  messagingSenderId: "1067221036159"
}

// react-redux-firebase config
const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true
}

// Initialize firebase instance
firebase.initializeApp(fbConfig)
firebase.firestore()


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

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

ReactDOM.render(
<Provider store={store}>
  <ReactReduxFirebaseProvider {...rrfProps}>
    <App />
  </ReactReduxFirebaseProvider>
</Provider>, document.getElementById('root'));
serviceWorker.unregister();

SomeComponent.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createRetro } from '../../store/actions/retroActions'

class CreateRetro extends Component {
  state = {
    title: '',
    content: ''
  }
  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    })
  }
  handleSubmit = (e) => {
    e.preventDefault();
    // console.log(this.state);
    this.props.createRetro(this.state);
    this.props.history.push('/');
  }
  render() {
    return (
      <div className="container">
        <form className="white" onSubmit={this.handleSubmit}>
          <h5 className="grey-text text-darken-3">Create a New Project</h5>
          <div className="input-field">
            <input type="text" id='title' onChange={this.handleChange} />
            <label htmlFor="title">Project Title</label>
          </div>
          <div className="input-field">
            <textarea id="content" className="materialize-textarea" onChange={this.handleChange}></textarea>
            <label htmlFor="content">Project Content</label>
          </div>
          <div className="input-field">
            <button className="btn pink lighten-1">Create</button>
          </div>
        </form>
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => {
  return {
    createRetro: (retro) => dispatch(createRetro(retro))
  }
}

export default connect(null, mapDispatchToProps)(CreateRetro)

retroActions.js

export const createRetro = (retro) => {
  return (dispatch, getState, {getFirestore}) => {
    const firestore = getFirestore();
    firestore.collection('retros').add({
      ...retro,
      authorFirstName: 'Jonas',
      authorLastName: 'Alvarson',
      authorId: 12345,
      createdAt: new Date()
    }).then(() => {
      dispatch({ type: 'CREATE_RETRO_SUCCESS' });
    }).catch(err => {
      dispatch({ type: 'CREATE_RETRO_ERROR' }, err);
    });
  }
};

What is the expected behavior?
Before I had the new doc added to my collection, but after trying the migration to 3.0.0-alpha-6. I have tried looking in the migration guide + the documentation to do all things the right way. Im not sure if a just did something wrong or missed anything. Thanks so much for any insight. I will continue to troubleshoot.

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-redux": "^6.0.0",
"react-redux-firebase": "^3.0.0-alpha.6",

[ckifer]

I think it is because you don't pass reduxFirestore(fbConfig) to compose. Also, you don't need to pass getFirebase to thunk anymore since the ReactReduxFirebaseProvider HOC. My store config that is working looks like so:

import thunk from 'redux-thunk';
import { reduxFirestore, getFirestore } from 'redux-firestore';
// eslint-disable-next-line import/no-extraneous-dependencies
import { compose } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './Reducers';
import fbConfig from '../Config/firebase';

// ======================================================
// Middleware Configuration
// ======================================================
const middleware = [
  thunk.withExtraArgument({ getFirestore }),
  // This is where you add other middleware like redux-observable
];


const store = () => createStore(
  rootReducer,
  compose(
    applyMiddleware(...middleware),
    reduxFirestore(fbConfig),
  ),
);

[jalvarson]

Thanks for your answers @ckifer I tried your solution by adding reduxFirestore(fbConfig)

But that didn't do it. Instead i passed in firebase instead of my fbConfig, that solved my issue.

[prescottprue]

@jalvarson Glad to hear you found a solution. You will also most likely want to update to the newest redux-firestore available on the alpha tag.

[huzaifah050]

@jalvarson Glad to hear you found a solution. You will also most likely want to update to the newest redux-firestore available on the alpha tag.

The update doesn't recommend the usage of reduxFirestore but createFirestoreInstance, still did it (with, createFirestoreInstance) and got "Error: Firebase instance does not yet exist. Check your compose function.". But when I revert to reduxFirestore, there seems to be no error.

[prescottprue]

@huzaifah050 Can you please open a new issue if you are experiencing something unexpected? Feel free to reference this issue - I just want to make sure we correctly track reproduction and fixing of what you are experiencing

[Ajmal-Jalal]

I think it is because you don't pass reduxFirestore(fbConfig) to compose. Also, you don't need to pass getFirebase to thunk anymore since the ReactReduxFirebaseProvider HOC. My store config that is working looks like so:

import thunk from 'redux-thunk';
import { reduxFirestore, getFirestore } from 'redux-firestore';
// eslint-disable-next-line import/no-extraneous-dependencies
import { compose } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './Reducers';
import fbConfig from '../Config/firebase';

// ======================================================
// Middleware Configuration
// ======================================================
const middleware = [
  thunk.withExtraArgument({ getFirestore }),
  // This is where you add other middleware like redux-observable
];


const store = () => createStore(
  rootReducer,
  compose(
    applyMiddleware(...middleware),
    reduxFirestore(fbConfig),
  ),
);

had the same issue and this solution worked for me

[gunjan768]

Thanks man @ckifer it solved my problem

[cotieno1]

Thank you very much @ckifer . The biggest challenge is that we depreciate and update our builds almost every day but we don't do that to our online learning tools on Youtube, Cousera , EDX most of them are outdated. Eish!! the challenge is trying to refactor code and learn at the same time

[Shahed7010]

@ckifer this worked for me too. thanks :)

[bhadpr]

@ckifer this worked for me too. thanks :)