2

I'm using 'react-redux-firebase' in my project and want to integrate firebase into react-thunk. Everything works fine on local but I got error when deploy project to Firebase hosting.

Uncaught Error: Firebase instance does not yet exist. Check your compose function.

What is the problem here?

store.js

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';

import rootReducer from './reducers/index';
import fbConfig from '../fbConfig';

/* eslint-disable no-underscore-dangle */
const composeEnhancers =
  process.env.NODE_ENV !== 'production' &&
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
    : compose();
/* eslint-enable */

const enhancer = composeEnhancers(
  applyMiddleware(
    thunk.withExtraArgument({
      getFirebase,
      getFirestore
    })
  ),
  reduxFirestore(fbConfig),
  reactReduxFirebase(fbConfig, {
    useFirestoreForProfile: true,
    userProfile: 'users'
  })
);

const configureStore = preloadedState =>
  createStore(rootReducer, preloadedState, enhancer);

const store = configureStore({});

export default store;

fbConfig.js

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: ...,
  authDomain: ...,
  databaseURL: ...,
  projectId: ...,
  storageBucket: ...,
  messagingSenderId: ...,
  appId: ...
};

firebase.initializeApp(firebaseConfig);
firebase.firestore().settings({});

export default firebase;

reducers/index

import { combineReducers } from 'redux';
import { firestoreReducer } from 'redux-firestore';
import { firebaseReducer } from 'react-redux-firebase';

import auth from './auth';

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

export default rootReducers;
2
  • 4
    I think when you are selecting composeEnhancers based on environment, You don't need to call compose() or __REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}), just put "compose" as you are calling composeEnhancers on the next line of code Commented Sep 21, 2019 at 8:18
  • @Muhammad Ali Raza thank you! that is the answer! Commented Oct 23, 2019 at 10:49

1 Answer 1

1

It is because you don't pass reduxFirestore(fbConfig) to compose

This might help you, Check this github link https://github.com/prescottprue/react-redux-firebase/issues/620#issuecomment-458344113

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.