I am trying to connect to a XMPP server using StropheJS library but can't figure out the right way to integrate it in my reactJS app. Now I got my code working by exporting Strophe object by adding this line in strophe.js package file in node_modules folder
module.exports = Strophe;
but I don't think this is the right way to go about it. Can someone guide me how to go about it.
In my js file I am importing strophe by adding line:
// This is JS
import React, { Component } from 'react';
import Strophe from "strophe";
class Login extends Component {
constructor(){
super();
this.state = {
connection: null
}
}
componentWillMount(){
this.setState({
connection : new Strophe.Connection("http://localhost:7070/http-bind/")
});
}
I want a way out without modifying the original strophe package file. Here is my complete code if you want to have a look: https://github.com/cravi24/clientApp/blob/master/src/Components/Login.js
Finally figured out the problem with my code. Strophe is a global object in Strophe library and as soon as I import this library in my react app, it becomes part of window object. Hence I need to use it like this :
new window.Strophe.Connection("http://localhost:7070/http-bind/")
instead of
new Strophe.Connection("http://localhost:7070/http-bind/")
Earlier I was expecting the strophe object to be available in my class as local var but since it wasn't exported in the strophe library, I couldn't access it.