How to migrate react-redux-firebase 2.x to react-redux-firebase 3.x

Question

I am transferring to react-redux-firebase 3.x I am studying react with this tutorial. https://github.com/ayush221b/MarioPlan-react-redux-firebase-app

How should I migrate the following codes?

index.js

const store = createStore(rootReducer, 
  compose(
  applyMiddleware(thunk.withExtraArgument({getFirebase,getFirestore})),
  reduxFirestore(fbConfig),
  reactReduxFirebase(fbConfig, {useFirestoreForProfile: true, userProfile: 'users', attachAuthIsReady: true}) 
  )
);

I found this document. https://react-redux-firebase.com/docs/v3-migration-guide.html I am rebuilding the project while referencing. However , I faced some issues. I don't know where this firebase comes from. Is fffConfig a common firebase-config?

reactReduxFirebase(firebase, rrfConfig)

fbconfig.js

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "1:12345:web:12345",
    measurementId: "G-6MGBT"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.firestore();

export default firebase;

https://github.com/ayush221b/MarioPlan-react-redux-firebase-app/blob/master/src/index.js

The code I modified

const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB
  attachAuthIsReady: true
}

 const rrfProps = {
     fbConfig,
     config: rrfConfig,
     dispatch: store.dispatch,
     createFirestoreInstance // <- needed if using firestore
  }



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

The error

TypeError: Cannot read property '_' of undefined
createFirebaseInstance
src/createFirebaseInstance.js:38
  35 | }
  36 | 
  37 | // Add internal variables to firebase instance
> 38 | const defaultInternals = {
     | ^  39 |   watchers: {},
  40 |   listeners: {},
  41 |   callbacks: {},

Hi, the error you are getting is being thrown in the line 38 of you code which we don't see to which of the code you posted correspond. But maybe [this article](http://net-informations.com/js/iq/unerror.htm#:~:text=JavaScript%20TypeError%20is%20thrown%20when,method%20on%20an%20undefined%20object%20.) that explains your error is useful to debug your code. — llompalles, Mar 05 '21 at 12:21

score 1 · Answer 1 · answered Mar 08 '21 at 21:59

When upgrading from v2 to v3 you want to remove the two store enhancers reduxFirestore and reactReduxFirebase. Instead you want to add a ReactReduxFirebaseProvider component between the Redux Provider and the App. This provider component needs certain props:

[required] props.config: object react-redux-firebase config
[required] props.dispatch: Function Redux's dispatch function
[required] props.firebase: object Firebase library
[optional] props.initializeAuth: boolean Whether or not to initialize auth
[optional] props.createFirestoreInstance: Function Function for creating extended firestore instance

The Migration Guide creates the props as a separate object rrfProps and then passes them to the provider like <ReactReduxFirebaseProvider {...rrfProps}>, but you can also just set the props on the provider directly.

I don't know where this firebase comes from. Is fffConfig a common firebase-config?

In the demo app that you linked to, the fbConfig (firebase config) is defined in a file ./config/fbConfig.js but it's not exported. The rrfConfig (react redux firebase config) is the object that they are passing as the second argument to reactReduxFirebase in index.js. The firebase instance is initialized at the end of the ./config/fbConfig.js file. The naming is misleading because the variable fbConfig in index.js is actually the store not the config object. But the prop that you are setting is named firebase, so your rrfProps should be:

const rrfProps = {
  firebase: fbConfig,
...

But honestly I would rename this import instead.

import firebase from './config/fbConfig'

And I find it clearer to pass props inline. So my revised code for the index.js file is:

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 {
  getFirebase,
  ReactReduxFirebaseProvider,
  createFirestoreInstance
} from "react-redux-firebase";
import firebase from "./config/fbConfig";

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

ReactDOM.render(
  <Provider store={store}>
    <ReactReduxFirebaseProvider
      firebase={firebase}
      config={{
        useFirestoreForProfile: true,
        userProfile: "users",
        attachAuthIsReady: true
      }}
      dispatch={store.dispatch}
      createFirestoreInstance={createFirestoreInstance}
    >
      <App />
    </ReactReduxFirebaseProvider>
  </Provider>,
  document.getElementById("root")
);

serviceWorker.register();

I've explained the changes to the thunk in this answer.

Hopefully that works. I'm not getting any compiler errors but I haven't tested the whole login/authentication flow.

Code Sandbox Link

How to migrate react-redux-firebase 2.x to react-redux-firebase 3.x

1 Answers1