Error: Context from react-redux not found. If you are using react-redux v6 a v3.*.* version of react-redux-firebase is required.

[youngheart12]

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.

[nico91470]

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.

[alex-r89]

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: prescottprue/react-redux-firebase#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?

[dbvrac]

@alex-r89 Would you mind posting the actual changes? I'm not quite following along. Thanks!

[alex-r89]

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.

[dbvrac]

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.

[samsoul16]

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.

[alex-r89]

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')
)

[samsoul16]

@alex-r89 Yup, yes you have to add useFirestoreForProfile: true if we need to connect profile later :)

[CiaranPearse]

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 😉

[Abdulzabeer]

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

[stuartverschoyle]

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(

<ReactReduxFirebaseProvider {...rrfProps}>


,
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();

[athenawisdoms]

@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?

[split750]

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 ?

[khgs2411]

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(

<ReactReduxFirebaseProvider {...rrfProps}>


,
rootElement
);
serviceWorker.unregister();
`

and I get this error :
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Which isn't even close to what you guys are getting.

[pprachit09]

@khgs2411 same issue for me...

[Shubhon9]

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(

<ReactReduxFirebaseProvider {...rrfProps}>


, 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();

I am getting error:Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. at the provider