object is not a function when calling `useFirestoreConnect`

Question

I'm using react-redux-firebase and redux-firestore packages. I'm trying to connect firestore to redux using the useFirestoreConnect hook, but after calling this hook it gives me a TypeError like in this picture. I've searched in the GitHub issues, docs and here but I'vent fount any solution.

The error: Uncaught (in promise) TypeError: Object(...) is not a function

you see the whole error in this picture:

The console.log error

The TypeError returned

Please paste the text of the error into your question so others can help you more easily. — Ross Allen, Jun 18 '20 at 13:53
I've shared a picture of the whole error, but ok I added the text! — AWIXOR, Jun 18 '20 at 14:05
Great, the text of the error helps but now we need to see the code that is producing this error so someone can help you debug. — Ross Allen, Jun 18 '20 at 14:06
The error is occurred when I call the `useFirestoreConnect` imported from `react-redux-firebase`. like this: `useFirestoreConnect(["products"])` — AWIXOR, Jun 18 '20 at 14:10
Does the json object have more elements? I ask you this because in the image that you shared, the last element is “doc: userId,” it has a comma, and if it is the last element, the comma should be eliminated, could you share more code? — Enrique Del Valle, Jun 18 '20 at 17:00
It's not about that, even without the doc it's not working. I tried calling the function as they mentioned here: [link](http://react-redux-firebase.com/docs/api/useFirestoreConnect.html) but its not working, I guess it's about version of firebase and redux, I opened an issue on their repo in GitHub about that. I want you to know this, just calling the function the error will appear, and the function is written as they mention on their docs, so it's not about the syntax you mentioned! @EnriqueDelValle — AWIXOR, Jun 18 '20 at 18:07

score 1 · Accepted Answer · answered Jun 23 '20 at 14:48

Hello guys I figure out where the problem coming from. This is for anyone who is looking for a solution.

react-redux-firebase and redux-firestore are having some issues in versions compatibility, so to skip that I installed the latest version of the packages!

Clearly there were some differences between old versions and the new ones of giving your app the redux firebase provider. The old way might look like this:

const store = createStore(
rootReducer,
composeEnhancers(
reactReduxFirebase(firebase, rrfConfig),
reduxFirestore(firebase),
applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore }))
)
);

but if you want to implement hooks in your app and use the useFirestoreConnect this will not work. In new versions you need to remove the reactReduxFirebase and reduxFirestore from your createStore func and instead use the ReactReduxFirebaseProvider imported from react-redux-firebase and wrap your app inside it, like this:

<ReduxProvider store={store}>
   <ReactReduxFirebaseProvider {...rrfProps}>
     <BrowserRouter>
       <AuthIsLoaded>
         <App />
       </AuthIsLoaded>
     </BrowserRouter>
   </ReactReduxFirebaseProvider>
</ReduxProvider>

and passed props: firebase, react-redux-firebase config and any other things you wan. the rrfProps are lik this:

const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance, //since we are using Firestore
};

and this is the react-redux-firebase config (rrfConfig):

const rrfConfig = {
  userProfile: "users",
  useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB
  attachAuthIsReady: true, // attaches auth is ready promise to store
};

object is not a function when calling `useFirestoreConnect`

1 Answers1

Linked