Object(...) is not a function error for applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore }))

Question

I got an error in my project that I created it with React/Redux/Firebase tools when I want to add dynamicly data with my CreateProject react component I got this error: × TypeError: Object(...) is not a function

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
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 { reduxFirestore, getFirestore } from "redux-firestore";
import { reactReduxFirebase, getFirebase } from "react-redux-firebase";
import fbConfig from "./config/fbConfig"

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

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

projectAction.js

export const createProject = project => {
  return (dispatch, getStore, { getFirebase, getFirestore }) => {
    // make async call to database
    const firestore = getFirestore();
    firestore.collection("projects").add({
      ...project,
      authorFirstName: "MyFirstName",
      authorLastName: "MyLastName",
      authorId: 12345,
      createdAt: new Date()
    }).then(
      () => {
        dispatch({
          type: "CREATE_PROJECT",
          project: project
        });
      }
    ).chatch(
      (err) => {
        dispatch({
          type: "CREATE_PROJECT_ERROR",
          project: err
        })
      }
    )
  };
};

thanks for your helps

Answer 1

I had the same error and after research, I found this fix:

import { ReactReduxFirebaseProvider } from 'react-redux-firebase'
import createReduxStore from './createReduxStore'

const fbConfig = {} // object containing Firebase config
const rrfConfig = { userProfile: 'users' } // react-redux-firebase config

// Initialize firebase instance
firebase.initializeApp(fbConfig)

const store = createReduxStore()

const rrfProps = {
 firebase,
 config: rrfConfig,
 dispatch: store.dispatch,
 // createFirestoreInstance // <- needed if using firestore
}
// Setup react-redux so that connect HOC can be used
const App = () => (
 <Provider store={store}>
 <ReactReduxFirebaseProvider {...rrfProps}>
  <Todos />
 </ReactReduxFirebaseProvider>
</Provider>
);

src: https://react-redux-firebase.com/docs/v3-migration-guide.html

Answer 2

This may work for you:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
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, reduxFirestore } from 'redux-firestore'
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase'
import fbConfig from './config/fbConfig'
import firebase from 'firebase/app'

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

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

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

serviceWorker.unregister();

For more details, go to official docs.

Answer 3

Have you read this? I think this question is same as yours and that your question can be solved by the answer of the link.