TypeError: Object(...) is not a function

[Astha4800]

[Jesontheg6]

Have you found a solution for this?

[MasriNaser]

i have the same issue!...i could not solve it yet!...any help?

[Sanan4li]

Hey, did you find the solution? I have same error.

[Sanan4li]

So, I found the solution. You need the exact same version that shaun is using for react-redux-firebase and redux-firestore...
use
npm install --save react-redux-firebase@2.1.8
npm install --save redux-firestore@0.5.7

I hope it will work. I will look for method that works on latest version but for now you can use this.

[MasriNaser]

ok thank you!

[CTOverton]

Just tried cloning the git branch lesson-19 and running npm update and project works fine with package.json

{
  "name": "marioplan",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "firebase": "^5.11.1",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-redux": "^5.1.2",
    "react-redux-firebase": "^2.5.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "redux": "^4.0.4",
    "redux-firestore": "^0.5.8",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

[John-Dennehy]

Is there a solution available for those of us unable to revert to outdated versions of the dependencies? Up until this lesson I had been successfully converting everything to functional components, and other more up-to-date conventions, but lesson 18 has stumped me a bit (And based on youtube comments, a lot of others too!).

[huzaifah050]

I am facing a similar challenge, I have tried all above suggestions, but problem still persists. Please can someone help.

[mohdorusaid]

Try reading the react-redux-firebase 2.. migration guide if you are using 3.. .That seems to be the problem.It uses a ReactReduxProvider kind of tag to get up and running.

[aajinkya1203]

The problem is that in the current version v3.. these functions are no longer available. However, after much research on other pages and other issues on github on the similar topic, I understood a solution which was feasible to me!

Follow this below lines of code if you're using firebase with redux and react along with Thunk!

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 rootReducers from './reducers/rootReducers';
import { Provider, useSelector } from 'react-redux';
import thunk from 'redux-thunk';
import { createFirestoreInstance, reduxFirestore } from 'redux-firestore';
import { ReactReduxFirebaseProvider, isLoaded } from 'react-redux-firebase';
import firebase from 'firebase/app';
import fbConfig from './config/fbConfig';  //this is the config file in which firebase connection details are present
                                          // along with firebase.initializeApp() and firebase.firestore() commands
import OctopusLoading from './images/Loading.gif';


const rrfConfig ={
  userProfile:'users',
  useFirestoreForProfile:true, //include if using firestore
  attachAuthIsReady:true  //include if using firebase auth
}

// reduxFirestore worked for me and i guess is still there in the current version3
// NOTE: This is a necessary step, because when you're using firebaseReducer and firestoreReducer in
// the root reducer then those reducers know which firebase database to connect to as you pass these information
// as fbConfig, so you're store now knows about youre firebase configuration file

const store = createStore(rootReducers, 
  compose(
    applyMiddleware(thunk),
    reduxFirestore(fbConfig)
  )
);

// we pass these props from the <ReactReduxFirebaseProvider> down to all the elements and catch 
// the firebase property using the withFirebase() function (HOC)
  const rrfProps={
    firebase,
    config:rrfConfig,
    dispatch:store.dispatch,
    createFirestoreInstance
  }

  // this function is used as an alternative to the function in v2.*.* so that my DOM renders only when
  // my firebase has made a connection (ignore this if not using firebase.auth())
  function AuthIsReady({ children }){
    const auth = useSelector(state=>state.firebase.auth);
    if(isLoaded(auth)){
      return children;
    }
    else{
      return <div className="center loading"> <img src= { OctopusLoading } alt="Loading... " /></div>
    }
  }

  // remove <AuthIsReady> tag is not using firebase.auth()

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

rootReducer.js

import authReducers from  './authReducers';
import projectReducers from './projectReducers';
import { combineReducers } from 'redux';
import { firebaseReducer } from 'react-redux-firebase';
import { firestoreReducer } from 'redux-firestore'

const rootReducers = combineReducers({
    firebase:firebaseReducer,
    firestore:firestoreReducer,
    auth: authReducers,
    project: projectReducers
})

export default rootReducers;

Now to use the firebase that we just passed as props to all the nested components, we need to use a HOC called

import { withFirebase } from 'react-redux-firebase';

How to Use withFirebase()

Class Components / Statefull Components

import { withFirebase } from 'react-redux-firebase';
import React, { Component } from 'react';

class someComponent extends Component{

handleSubmit=()=>{
console.log(this.props.firebase);
}

render(){
   return(
   // some JSX template
   )
}

}

export default withFirebase(someComponent);  //due to this the firebase is now available in the 
//props of this Component and can be accessed as this.props.firebase;

Similary, for function/ stateless Components

import { withFirebase } from 'react-redux-firebase';
import React from 'react';

const someComponent(props){
  console.log(props.firebase); // firebase config and details logged on console
   return(
   // some JSX template
   )


}

export default withFirebase(someComponent);  //due to this the firebase is now available in the 
//props of this Component and can be accessed as props.firebase;

Hope it clears any doubts! :)

I got all this from the v3 migration guidelines and one of @prescottprue 's github issues (can't find it now lmao)

[Dhanushreddy09]

i have got problem with createstoreWithFirebase!:)

[aajinkya1203]

Do provide more details like code and dependencies along with the error.

[anbhuonline]

@Sanan4li i was breaking head for this. You really saved my day. Thanks alot!!!

So, I found the solution. You need the exact same version that shaun is using for react-redux-firebase and redux-firestore...
use
npm install --save react-redux-firebase@2.1.8
npm install --save redux-firestore@0.5.7

I hope it will work. I will look for method that works on latest version but for now you can use this.

[Shubhamkumarsingh]

@Sanan4li i was breaking head for this. You really saved my day. Thanks alot!!!

So, I found the solution. You need the exact same version that shaun is using for react-redux-firebase and redux-firestore...
use
npm install --save react-redux-firebase@2.1.8
npm install --save redux-firestore@0.5.7
I hope it will work. I will look for method that works on latest version but for now you can use this.

does it work for you? for me the problem remains same just a bunch of new error are there.

[ghost]

The version used in the tutorial is an older one. It is a react-redux-firebase v2.x.x coding pattern and you probably have v3.x.x installed.
-Check which version of react-redux-firebase you are using:
npm ls react-redux-firebase
-If the version is 3.0.0 or higher, you need to migrate your code to the new coding pattern. See React-Redux-Firebase v3.x.x Migration(http://react-redux-firebase.com/docs/v3-migration-guide.html) Guide for detailed instructions.

[RIT3shSapata]

So, I found the solution. You need the exact same version that shaun is using for react-redux-firebase and redux-firestore...
use
npm install --save react-redux-firebase@2.1.8
npm install --save redux-firestore@0.5.7

I hope it will work. I will look for method that works on latest version but for now you can use this.

Thanks a lot this works properly

[RIT3shSapata]

@Sanan4li i was breaking head for this. You really saved my day. Thanks alot!!!

So, I found the solution. You need the exact same version that shaun is using for react-redux-firebase and redux-firestore...
use
npm install --save react-redux-firebase@2.1.8
npm install --save redux-firestore@0.5.7
I hope it will work. I will look for method that works on latest version but for now you can use this.

does it work for you? for me the problem remains same just a bunch of new error are there.

Yes this worked for me

[lonebots]

So, I found the solution. You need the exact same version that shaun is using for react-redux-firebase and redux-firestore...
use
npm install --save react-redux-firebase@2.1.8
npm install --save redux-firestore@0.5.7

I hope it will work. I will look for method that works on latest version but for now you can use this.

Yes,It worked for me too! Thank you.

[paulmattu]

from a youtube-comment (Ishwari Pandey)
worked for me

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./store/reducers/rootReducer";
import { Provider } from "react-redux";
import thunk from "redux-thunk";

import firebase from './config/fbConfig'
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase'
import { createFirestoreInstance} from 'redux-firestore'

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

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

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

projectActions.js

export const createProject = (project) => {
    return (dispatch, getState, {getFirebase}) =>{
        const firestore = getFirebase().firestore()       
        firestore.collection('projects').add({
            ...project,
            authorFirstName: "first",
            authorLastName: "second",
            createdAt: new Date()
        }).then(()=>{
            dispatch({type: "CREATE_PROJECT", project})

        }).catch(error => dispatch({type: "CREATE_PROJECT_ERROR", error}))
    }  
}

[codewarrior4]

Here's my solution

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/jquery.js';
import 'popper.js/dist/popper.js';
import 'bootstrap/dist/js/bootstrap.js';
import "materialize-css/dist/css/materialize.css"
import "materialize-css/dist/js/materialize"
import rootReducer from './store/reducers/rootReducer'
import App from './App';
import reportWebVitals from './reportWebVitals';
import {createStore,applyMiddleware,compose} from 'redux';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk'
import {reduxFirestore,createFirestoreInstance,getFirestore} from 'redux-firestore'
import {ReactReduxFirebaseProvider,getFirebase} from 'react-redux-firebase'
import firebaseConfig from './config/fbConfig'
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

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

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

const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance,
};
// firebase.initializeApp(firebaseConfig);
ReactDOM.render(
<React.StrictMode>

<ReactReduxFirebaseProvider {...rrfProps}>

    <App />
  
</ReactReduxFirebaseProvider>

, document.getElementById('root') );

reportWebVitals();

Root Reducer

import { combineReducers } from 'redux'
import { firebaseReducer } from 'react-redux-firebase'
import { firestoreReducer } from 'redux-firestore'
import authReducer from './authReducer'
import projectReducer from './projectReducer'

const rootReducer =combineReducers({
auth:authReducer,
project:projectReducer,
firestore: firestoreReducer,
firebase: firebaseReducer,

})

export default rootReducer

fbconfig
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
var firebaseConfig = {
apiKey: "AIzaSyBlSM9s7H_MX1ykX7bJ5k-pEulw3T5q-F0",
authDomain: "marioplan-1669.firebaseapp.com",
projectId: "marioplan-1669",
storageBucket: "marioplan-1669.appspot.com",
messagingSenderId: "323118768684",
appId: "1:323118768684:web:e61dee1f025d9875fca789",
measurementId: "G-REQ4WVG0JV"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.firestore().settings({timestampsInSnapshots:true})
// firebase.analytics();

export default firebase

Project CreateAction

[bilal-qexal]

So, I found the solution. You need the exact same version that shaun is using for react-redux-firebase and redux-firestore...
use
npm install --save react-redux-firebase@2.1.8
npm install --save redux-firestore@0.5.7

I hope it will work. I will look for method that works on latest version but for now you can use this.

Great job Brother 👍|

I wasted too much time to resolve this problem but only this can help to resolve the problem
THANK YOU

[ehmusman]

So, I found the solution. You need the exact same version that shaun is using for react-redux-firebase and redux-firestore...
use
npm install --save react-redux-firebase@2.1.8
npm install --save redux-firestore@0.5.7

I hope it will work. I will look for method that works on latest version but for now you can use this.

You save my day buddy thanks

[heldergonzaga]

I solved this problem by changing the firebase version:
npm uninstall --save firebase@3.0.0 npm install --save firebase@5.1.0