New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property 'ref' of undefined - on wrapped store #157

Closed
ykorach opened this Issue Jun 15, 2017 · 3 comments

Comments

Projects
None yet
3 participants
@ykorach

ykorach commented Jun 15, 2017

I am using 'react-chrome-redux' package in order to develop a chrome extension which use firebase for authenticating and data storing

I configured my environment correctly, but I got this error:

Uncaught TypeError: Cannot read property 'ref' of undefined at FirebaseConnect.componentWillMount (popup.js:31141) at popup.js:17038 at measureLifeCyclePerf (popup.js:16766) at ReactCompositeComponentWrapper.performInitialMount (popup.js:17037) at ReactCompositeComponentWrapper.mountComponent (popup.js:16948) at Object.mountComponent (popup.js:2651) at ReactCompositeComponentWrapper.performInitialMount (popup.js:17061) at ReactCompositeComponentWrapper.mountComponent (popup.js:16948) at Object.mountComponent (popup.js:2651) at ReactCompositeComponentWrapper.performInitialMount (popup.js:17061)

my store configuration:

import {wrapStore} from 'react-chrome-redux';

const firebaseConfig = {
    apiKey: "***",
    authDomain: "***",
    databaseURL: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "***"
};

const reduxFirebase = {
    userProfile: 'auth', // root that user profiles are written to
    enableLogging: false, // enable/disable Firebase Database Logging
    updateProfileOnLogin: true ,// enable/disable updating of profile on login
    enableRedirectHandling: false
};
const store = createStore(rootReducer, compose(reactReduxFirebase(firebaseConfig, reduxFirebase)));
wrapStore(store, {
    portName: 'example'
});

and:

import {Store} from 'react-chrome-redux';
import {Provider} from 'react-redux';

const proxyStore = new Store({
  portName: 'example'
});

render(
    <Provider store={proxyStore}><App /></Provider>
  , document.getElementById('app'));

so infact the redux store is wrapped in order to use chrome extension functionality.
App :

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
      console.log('props',this.props);
    return (
      <div>
        Click Count: {this.props.count}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};
const wrapped =  firebaseConnect()(App);
export default connect(mapStateToProps)(wrapped);

when I am trying to connect component with firebaseConnect I get the error mentioned above .
Thank's!

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Jun 15, 2017

Owner

Never used react-chrome-redux before, so I am not sure what it requires. Will look into this and get back to you.

Owner

prescottprue commented Jun 15, 2017

Never used react-chrome-redux before, so I am not sure what it requires. Will look into this and get back to you.

@prescottprue prescottprue self-assigned this Jun 15, 2017

@phsultan

This comment has been minimized.

Show comment
Hide comment
@phsultan

phsultan Jun 16, 2017

Hi guys,

I'm in the process of doing the same, my advice is not to try to firebaseConnect in your content/popup scripts (popup in my case), mostly because the Store object (the proxyStore in react-chrome-redux), is not "composed" with the reactReduxFirebase function as it normally should. I'm not sure how hard it would get to enhance the Store object in that regard though.

To sum up, use react-redux-firebase in the background script , and communicate with your content/popup using the proxy store and aliases. This is what I have done in order to authenticate the user from the popup.

// in popup, display a login form (component named LoginForm)
...
const store = new Store({
  portName: 'example'
});
...
  onSubmit(e) {
    e.preventDefault();
    if (this.isValid()) {
      // USER_LOGGING_IN is defined as an alias in react-chrome-redux
      store.dispatch({ type: 'USER_LOGGING_IN', data: {email: "test", password: "test"}});
    }
  }
...
// Do not call firebaseConnect here
export default connect(null, { login })(LoginForm);

Then, create your alias in the background script, import react-redux-firebase as well as redux-thunk to wait for Firebase's reply before updating the state (see reply in tshaddix/react-chrome-redux#84).

// in event (background script)
...
import thunk from 'redux-thunk'
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase'
...
// Add redux Firebase to compose
const createStoreWithFirebase = compose(
  reactReduxFirebase(firebaseConfig, config)
)(createStore)

const store = createStoreWithFirebase(
  rootReducer,
  {},
  enhancer)

wrapStore(store, {
  portName: 'example'
});
...
const aliases = {
  USER_LOGGING_IN: (payload) => {
    return (dispatch) => {
      getFirebase().login({
        email: payload.data.email,
        password: payload.data.password
      })
      .then(() => {
        dispatch({
          type: constants.USER_LOGGED_IN,
          payload: "ok"
        })
      })
      .catch(() => {
        dispatch({
          type: constants.USER_LOGGED_OUT,
          payload: "nok"
        })
      })
    }
  }
};

I'm not completely sure if that is a correct approach, and I do hope that can help you. Any feedback from you guys would be appreciated! Thanks a lot @prescottprue for this great module!

phsultan commented Jun 16, 2017

Hi guys,

I'm in the process of doing the same, my advice is not to try to firebaseConnect in your content/popup scripts (popup in my case), mostly because the Store object (the proxyStore in react-chrome-redux), is not "composed" with the reactReduxFirebase function as it normally should. I'm not sure how hard it would get to enhance the Store object in that regard though.

To sum up, use react-redux-firebase in the background script , and communicate with your content/popup using the proxy store and aliases. This is what I have done in order to authenticate the user from the popup.

// in popup, display a login form (component named LoginForm)
...
const store = new Store({
  portName: 'example'
});
...
  onSubmit(e) {
    e.preventDefault();
    if (this.isValid()) {
      // USER_LOGGING_IN is defined as an alias in react-chrome-redux
      store.dispatch({ type: 'USER_LOGGING_IN', data: {email: "test", password: "test"}});
    }
  }
...
// Do not call firebaseConnect here
export default connect(null, { login })(LoginForm);

Then, create your alias in the background script, import react-redux-firebase as well as redux-thunk to wait for Firebase's reply before updating the state (see reply in tshaddix/react-chrome-redux#84).

// in event (background script)
...
import thunk from 'redux-thunk'
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase'
...
// Add redux Firebase to compose
const createStoreWithFirebase = compose(
  reactReduxFirebase(firebaseConfig, config)
)(createStore)

const store = createStoreWithFirebase(
  rootReducer,
  {},
  enhancer)

wrapStore(store, {
  portName: 'example'
});
...
const aliases = {
  USER_LOGGING_IN: (payload) => {
    return (dispatch) => {
      getFirebase().login({
        email: payload.data.email,
        password: payload.data.password
      })
      .then(() => {
        dispatch({
          type: constants.USER_LOGGED_IN,
          payload: "ok"
        })
      })
      .catch(() => {
        dispatch({
          type: constants.USER_LOGGED_OUT,
          payload: "nok"
        })
      })
    }
  }
};

I'm not completely sure if that is a correct approach, and I do hope that can help you. Any feedback from you guys would be appreciated! Thanks a lot @prescottprue for this great module!

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Jul 3, 2017

Owner

@phsultan Thanks for posting your example! I am going to look into indicating this in the docs somewhere, and even potentially creating a react-chrome-redux example.

@ykorach going to assume this solution works for you for now and close the issue. Will post to this issue with the link to the example after it is included.

Owner

prescottprue commented Jul 3, 2017

@phsultan Thanks for posting your example! I am going to look into indicating this in the docs somewhere, and even potentially creating a react-chrome-redux example.

@ykorach going to assume this solution works for you for now and close the issue. Will post to this issue with the link to the example after it is included.

prescottprue added a commit that referenced this issue Jul 13, 2017

react-chrome-redux recipe added to docs
* react-chrome-redux recipe added based on #157
* Docs cleanup (removed duplicate docs due to comments not having
private).

prescottprue added a commit that referenced this issue Jul 13, 2017

react-chrome-redux recipe added to docs
* react-chrome-redux recipe added based on #157
* Docs cleanup (removed duplicate docs due to comments not having
private).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment