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";
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
<div ref="firechatroom"></div>`
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.
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:
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.