Search code examples
javascriptamdwebpackstrophe

How to import strophe using requirejs?

I'm trying to use strophe.js with relay-starter-kit. I checked out relay-starter-kit, added "strophe": "^1.2.2" to package.json and ran npm install.

I can't find how to import strophe without getting errors. If I just try import Strophe from 'strophe'; I get errors that webpack can't resolve strophe-polyfill. I added a resolve alias for that pointing to the main strophe.js file, but that hasn't helped (I just get a console message Uncaught ReferenceError: Strophe is not defined).

It looks like strophe has some weird module system (it mentions AMD in github but I thought that meant I could just require it, but apparently not). All the examples I've seen import it in an HTML file and clutter the global namespace. I need to use it from within react so I don't think that will work.

How can I import strophe to use in my es6 files?

Solution

  • Since I wasted hours of my life on this, here's the answer:

    1. Include strophe in the HTML file with:

    2. Edit server.js to make webpack expose strophe as a static path with:

      app.use('/node_modules/strophe', express.static('node_modules/strophe'));

    3. In the react component, there's no need to import strophe since it's now globally available. Instead just connect with, e.g.:

      var connection = new Strophe.Connection("ws://" + server + ":5280/websocket/");