I'm trying to create a project in React and I'm using Firebase. In my react-redux-firebase project one line of code making error but I couldn't fix that. How could I fix this "TypeError: Object(...) is not a function"
I have searched for this problem but couldn't fix the problem.
I'm following a tutorial where the react version is 16.4.1. I'm not sure this is the problem or not
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)
)
);
if I comment out the reatReduxFirebase() then it works fine but I need this to work
You could find all codes here: https://github.com/martuza-shimul/React-Blog-app
TypeError: Object(...) is not a function
Module../src/index.js
i:/Learning new things/react/pma/src/index.js:17
14 | const store = createStore(
15 | rootReducer,
16 | compose(
> 17 | applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
18 | reduxFirestore(fbConfig),
19 | reactReduxFirebase(fbConfig)
20 |
I'm not sure how to fix this. A little bit of help/hint really be appreciated.
Please use this npm packages
npm packages compatibility issue
npm i --save react-redux@5.1.1 react-redux-firebase@2.2.4
This is a react-redux-firebase v2.xx coding pattern and you probably have v3.xx installed.
npm ls react-redux-firebase
The reactReduxFirebase store enhancer is removed in the version v3 and above. You can now create firebase instance using context providers. The same can now be done as:
const store = createStore(
rootReducer,
compose(
applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
reduxFirestore(fbConfig)
)
);
const rrfProps = {
firebase,
config: fbConfig,
dispatch: store.dispatch
}
const App = () => (
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<Todo /> // your Component
</ReactReduxFirebaseProvider>
</Provider>
);
As of now the 'reduxFirestore' is working fine so I want to leave it as it is but I assume the same will happen to it in coming days. So its a good idea to omit compose and reduxFirestore(fbConfig) and instead use:
import { createFirestoreInstance } from 'redux-firestore'
and add createFirestoreInstance to rrfProps as below:
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance
}
For more information checkout: http://react-redux-firebase.com/docs/v3-migration-guide.html#remove-createFirebaseConnect-and-createFirestoreConnect
Option 01- adjust npm package versions for
react-redux & react-redux-firebase
npm install react-redux@5.1.1 react-redux-firebase@2.2.4
Option 02- Refer v3 ( http://react-redux-firebase.com/docs/v3-migration-guide.html )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.