FirebaseExtended/firechat

Uncaught Type Error: chat.setUser is not a function

ninjatron opened this issue · 0 comments

I am trying to make firechat work with React for a web app. I used NPM to install firechat and followed along the documentation, however I am stuck. This is how I am trying to make it work:

`import FirechatUI from "firechat";
import Firechat from "firechat";

class ProfilePage extends Component {
constructor() {
super();
this.state = {
signed_in: false
};
}

componentWillMount() {
var signed_in = AuthStore.getSignInState();
this.setState({signed_in: signed_in});
var user = firebase.auth().currentUser;
if (user) {
// Get a Firebase Database ref
var chatRef = firebase.database().ref();
// Create a Firechat instance
var chat = new FirechatUI(chatRef, this.refs.firechatroom);
// Set the Firechat user
chat.setUser(user.uid, user.displayName);
}
}

render() {
let content = null;
if (this.state.signed_in) {
content =


This is the ProfilePage


`

Everything firechat related is above. And this is the console error I got:

Uncaught TypeError: chat.setUser is not a function
at ProfilePage.componentWillMount (ProfilePage.js:72)
at eval (ReactCompositeComponent.js:348)
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:347)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
at Object.updateChildren (ReactChildReconciler.js:121)
at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:208)
at ReactDOMComponent._updateChildren (ReactMultiChild.js:312)
at ReactDOMComponent.updateChildren (ReactMultiChild.js:299)
componentWillMount @ ProfilePage.js:72
(anonymous) @ ReactCompositeComponent.js:348
measureLifeCyclePerf @ ReactCompositeComponent.js:75
performInitialMount @ ReactCompositeComponent.js:347
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
updateChildren @ ReactChildReconciler.js:121
_reconcilerUpdateChildren @ ReactMultiChild.js:208
_updateChildren @ ReactMultiChild.js:312
updateChildren @ ReactMultiChild.js:299
_updateDOMChildren @ ReactDOMComponent.js:930
updateComponent @ ReactDOMComponent.js:748
receiveComponent @ ReactDOMComponent.js:710
receiveComponent @ ReactReconciler.js:125
_updateRenderedComponent @ ReactCompositeComponent.js:754
_performComponentUpdate @ ReactCompositeComponent.js:724
updateComponent @ ReactCompositeComponent.js:645
receiveComponent @ ReactCompositeComponent.js:547
receiveComponent @ ReactReconciler.js:125
_updateRenderedComponent @ ReactCompositeComponent.js:754
_performComponentUpdate @ ReactCompositeComponent.js:724
updateComponent @ ReactCompositeComponent.js:645
receiveComponent @ ReactCompositeComponent.js:547
receiveComponent @ ReactReconciler.js:125
_updateRenderedComponent @ ReactCompositeComponent.js:754
_performComponentUpdate @ ReactCompositeComponent.js:724
updateComponent @ ReactCompositeComponent.js:645
performUpdateIfNecessary @ ReactCompositeComponent.js:561
performUpdateIfNecessary @ ReactReconciler.js:157
runBatchedUpdates @ ReactUpdates.js:150
perform @ Transaction.js:140
perform @ Transaction.js:140
perform @ ReactUpdates.js:89
flushBatchedUpdates @ ReactUpdates.js:172
closeAll @ Transaction.js:206
perform @ Transaction.js:153
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
Header.js:67 Object {signed_in: true}
ReactReconciler.js:63 Uncaught TypeError: Cannot read property 'getHostNode' of null
at Object.getHostNode (ReactReconciler.js:63)
at ReactCompositeComponentWrapper.getHostNode (ReactCompositeComponent.js:384)
at Object.getHostNode (ReactReconciler.js:63)
at Object.updateChildren (ReactChildReconciler.js:113)
at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:208)
at ReactDOMComponent._updateChildren (ReactMultiChild.js:312)
at ReactDOMComponent.updateChildren (ReactMultiChild.js:299)
at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:930)
at ReactDOMComponent.updateComponent (ReactDOMComponent.js:748)
at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:710)

This is the warning if I try to access to Profile Page (where firechat code is), moreover, I won't be able to open this page because of the error on ReactReconciler.js error on line 63.

I don't know a ton about React or Firechat, so I'd really appreciate help. What could I be doing wrong? I don't see why it would say chat.setUser is not a function, I am pretty sure I create the FirechatUI instance correctly. Also, I tried to create the instance using Firechat only (not FirechatUI) and still had to same error.

Thanks.