Open youngheart12 opened 5 years ago
If you look in comments on the vide, you can find the solution:
Lasse Wenger il y a 3 mois (modifié) @Omprakash Panigrahi Yes i found this answer and i rolled back "react-redux": "^6.0.0" to "react-redux": "^5.1.1" using: npm i --save react-redux@^5.1.1 (Remember to CD into the right directory were your ninja project is) https://stackoverflow.com/questions/53872757/react-redux-v6-a-v3-version-of-react-redux-firebase-is-required. After that i restartet the application and everything worked perfectly as mr. Ninja in the tutorial.
I don't really think its a good idea to downgrade your version of "react-redux" to 5.1.1. Packages are updated for a reason, locking into an old version could potentially open you up to a number of issues, including security issues.
The reason this issue is caused is explained here: https://github.com/prescottprue/react-redux-firebase/issues/581
In order to fix this, you need to first use a version 3.X of "react-redux-firebase". At time of writing this is version 3.0.0-alpha.11
.
Then, you need to replace reactReduxFirebase
from 'react-redux-firebase' with ReactReduxFirebaseProvider
and replace reduxFirestore
from 'redux-firestore' with createFirestoreInstance
. This is explained on the migration document here: http://docs.react-redux-firebase.com/history/v3.0.0/docs/v3-migration-guide.html
Finally, you need to remove the reduxFirestore(fbConfig), reactReduxFirebase(fbConfig)
from the store inside of index.js
and wrap <App />
in ReactReduxFirebaseProvider
, as follows:
<Provider store={store}>
<ReactReduxFirebaseProvider
firebase={fbConfig}
config={fbConfig}
dispatch={store.dispatch}
createFirestoreInstance={createFirestoreInstance}>
<Router />
</ReactReduxFirebaseProvider>
</Provider>,
document.getElementById('root')
)
I do think it was a bit of a shame that Shaun chose to use "react-redux-firebase" and "redux-firestore", because it takes away some of the "under the hood" stuff when interacting with firebase, its not necessary and leads to issues like this one. However, I understand why he did and hopefully this isn't too hard to follow/this fixes this problem for some people.
Could @iamshaunjp comment on this just to clarify this is what he would also recommend?
@alex-r89 Would you mind posting the actual changes? I'm not quite following along. Thanks!
It would be better if @iamshaunjp replied to this. Its his course and he chose to use react-redux-firebase
. I have tried to explain it as best as I can above, however it may not be the best fix - getFirebase
will also break the entire app (when you get to course video 23) because getFirebase
has been removed from the react-redux-firebase
API. This is a great example of the down side of using packages for everything, especially video tutorials.
Yes, hearing from the author would be the best course of action, but mine is research code so it doesn't have to be right, it just has to work. But thanks for the heads-up, I'll stop being curious about it and stick with the cheaper fix of updating to react-redux@^5.1.1. Thanks for the response.
Hello Guys, you could take a look at this code pen of mine which has a working setup for the latest version of the libraries.
https://codesandbox.io/s/8423o1m529
I didn't share the code here as it would take too much space and wouldn't make much sense.
@iamshaunjp it would be great if you could take a glimpse at it too.
Looks good @samsoul16 . You will also need to pass useFirestoreForProfile: true
into rrfProps
as it is needed later in the tutorials. I set it up like this:
const rrfConfig = {
userProfile: 'users',
useFirestoreForProfile: true
}
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance // <- needed if using firestore
}
ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
</Provider>,
document.getElementById('root')
)
@alex-r89 Yup, yes you have to add useFirestoreForProfile: true
if we need to connect profile later :)
I've been running into issues now, after making those changes, with the create functionality. Error is 'firebase instance is not ready'.
Any ideas guys?
The last thing I want to do is roll back to a older version 😉
help me
Error: Context from react-redux not found. If you are using react-redux v6 a v3.. version of react-redux-firebase is required. Please checkout the v3 migration guide: http://bit.ly/2SRNdiO
help me
Error: Context from react-redux not found. If you are using react-redux v6 a v3.. version of react-redux-firebase is required. Please checkout the v3 migration guide: http://bit.ly/2SRNdiO
this seems to fix it. replace your index.js with this.
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 } from 'redux-firestore'; import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase'; import firebase from 'firebase/app'; import 'firebase/firestore'; import 'firebase/auth';
const store = createStore(rootReducer, compose(applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore }))));
const rrfConfig = { userProfile: 'users', attachAuthIsReady: true, useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB }; const rrfProps = { firebase, config: rrfConfig, dispatch: store.dispatch, createFirestoreInstance // <- needed if using firestore };
ReactDOM.render(
@stuartverschoyle Amazing you got it to work!
Can you explain more details what is it that allowed react-redux-firebase v3 to work with react-redux v7?
hello,
i still get this error...
Error: Firebase instance does not yet exist. Check your compose function.
getFirestore
D:/www/semyos-react/semyos-website-react/node_modules/redux-firestore/es/enhancer.js:71
(anonymous function)
D:/www/semyos-react/semyos-website-react/src/store/actions/projectActions.js:6
3 | export const createProject = (project) => {
4 | return (dispatch, getState, { getFirebase, getFirestore }) => {
5 | // make async call to database
> 6 | const firestore = getFirestore();
7 | firestore.collection('semyosprojects').add({
8 | ...project,
9 | authorFirstName: 'Godefroy',
any suggestion ?
This is my 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 { getFirestore, createFirestoreInstance } from "redux-firestore"; import { ReactReduxFirebaseProvider, getFirebase } from "react-redux-firebase"; import firebase from "firebase/app"; import "firebase/firestore"; import "firebase/auth";
const rootElement = document.getElementById("root");
const store = createStore( rootReducer, compose( applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })) ) );
const rrfConfig = { userProfile: "users", attachAuthIsReady: true, useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB }; const rrfProps = { firebase, config: rrfConfig, dispatch: store.dispatch, createFirestoreInstance // <- needed if using firestore };
ReactDOM.render(
@khgs2411 same issue for me...
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} from 'redux-firestore' import {getFirebase} from 'react-redux-firebase' import fsConfig from './config/fsConfig' import firebase from 'firebase/app' import ReactReduxFirebaseProvider from 'react-redux-firebase'
const store= createStore(rootReducer,compose( applyMiddleware(thunk.withExtraArgument({getFirebase,getFirestore})), //reduxFirestore(fsConfig), //reactReduxFirebase(fsConfig) ) );
const rrfProps = {
firebase,
config: fsConfig,
dispatch: store.dispatch,
createFirestoreInstance
};
ReactDOM.render(
I was following the video tutorial till 19th after that when I implemented the code I got this error. Will be really helpful if someone can help me out with this issue.