React-redux-firebase: redux-immutable-state-invariant middleware support

[thisisamurray]

I've been receiving a warning and error for Uncaught RangeError: Maximum call stack size exceeded from react-redux-firebase whenever a user is logged in with Firebase (via email) and I attempt to run firebaseConnect.

The warning happens right after the Redux event LOGIN and a POST request to retrieve the user's account info (https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=AI...). If I clear out the user data by running firebase.logout(), then all other data loads normally.

On page load, I receive this error from react-redux-firebase/dist/react-redux-firebase.js?5e5f but when I attempt to navigate using a react-router link, it comes from redux-immutable-state-invariant/dist/trackForMutations.js?9dd4

I've been removing functionality from my app to try and figure out what is causing it, and I have no idea on anything that is triggering a loop of functionality. Any direction you can send me to further debug or clarification on what within react-redux-firebase would be getting in this infinite loop would be greatly appreciated.

These are the decorators I'm using on my functional container:

@firebaseConnect([
  '/artists/ilovetesting'
])
@connect(
  (state)=>({
    profile: pathToJS(state.firebase, 'profile'),
  })
)

My init config for this library:

reactReduxFirebase(
      {
        apiKey: "AIz...xSY",
        authDomain: "ilove...c.firebaseapp.com",
        databaseURL: "https://ilove...c.firebaseio.com",
        storageBucket: "ilove...c.appspot.com",
        messagingSenderId: "665...6",
      }, 
      {
        updateProfileOnLogin: false,
        enableRedirectHandling: false,
        autoPopulateProfile: false
      }
),

[prescottprue]

Did you try passing userProfile: 'users' to your config? You getting the error at all is definitely a bug, but give that a try and see if it works for you.

Also what version are you on currently?

[thisisamurray]

Updated the config to this still produced the error:

reactReduxFirebase(
      {
        apiKey: "AIz...xSY",
        authDomain: "ilove...c.firebaseapp.com",
        databaseURL: "https://ilove...c.firebaseio.com",
        storageBucket: "ilove...c.appspot.com",
        messagingSenderId: "665...6",
      }, 
      {
        updateProfileOnLogin: false,
        enableRedirectHandling: false,
        autoPopulateProfile: false,
        userProfile: 'users'
      }
),

I'm using v1.4.0-beta, but first experienced the issue on v1.3.4 (thought an update may clear it out). I am using React Slingshot for the boilerplate, it's the only thing that seems different from the way the project is set up within the Get Started guide. Below is the Redux store configuration function, if it helps (eliminate the chance I did something dumb to set my app up).

function configureStore(initialState) {
  const middlewares = [
    reduxImmutableStateInvariant(),
    thunk.withExtraArgument(getFirebase),
  ];
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 
  const store = createStore(rootReducer, initialState, composeEnhancers(
    applyMiddleware(...middlewares),
    reactReduxFirebase(fbConf, {
      updateProfileOnLogin: false,
      enableRedirectHandling: false,
      autoPopulateProfile: false
    }),
    )
  );
  return store
};

[prescottprue]

@thisisamurray I am going to attempt to replicate this, but have not personally ever tried it with React Slingshot.

It might also be due to your usage of reduxImmutableStateInvariant() in your middlewares since the issue you are seeing is redux-immutable-state-invariant. Try commenting that out and see if you still have an issue.

It might also help to try using ignore from the redux-immutable-state-invariant api to ignore the firebase section of the redux state tree

[thisisamurray]

Thanks @prescottprue, I appreciate you looking into it.

If you're cool with waiting until Saturday to dive in deeper, I can fork my project and make it public. That way you can see all the parts I'm using. Can't get back to it until Saturday anyway.

[prescottprue]

@thisisamurray Going to try to replicate using React Slingshot in the meantime (since the v1.4.0 release will most likely be before Saturday) to confirm it is associated with redux-immutable-state-invariant. It does seem to be the case since there are similar issues posted on there, and ignore was the answer.

[thisisamurray]

Thanks @prescottprue, updating redux-immutable-state-invariant to v2.0.0 and ignoring the firebase part of the redux store worked perfectly. Closing this issue.

Below is what I'm using within React Slingshot's middleware for redux-immutable-state-invariant just for future people to know what to do.

Replace this:

reduxImmutableStateInvariant()

With this:

reduxImmutableStateInvariant({
      ignore: [
        'firebase',
      ]
    })