React-Native support

[franleplant]

Hi There!

Thanks a lot for your work on this amazing library.

I've been fighting a lot with the browser builds, for several reasons:

• Im using React Native and I need to manually create a dist file
• Im using Typescript and I cannot include that dist file in my source because Typescript will complain no end
• I tried other libraries and frankly this one is the best one
• Playing around with node_modules is no good, there's no easy solution for automating steps inside that directory and it's also a transient directory, I don't want to get too attached to it in the case I need to rm -rf node_modules, which is too often

So, that's my problem, and here is my solution, which aims to be as simple as it gets

• Add dist/mqtt.js to the source files, so I can easily require(mqtt/dist/mqtt). Names can be discussed but the important thing is to have that file available

There are other variations of this solution but I think this works and it's super simple and you already got the script to generate those dist files, the only remaining thing to do would be to un-ignore dist and to fix all the pre-commit checks that fail on those dist files

What do you think?

There might be more fancy solutions and Im open to anything but this requires minimal work and provides maximum satisfaction

[franleplant]

Other easy solution is to add a postinstall hook that creates the build every time someone installs the package

[mcollina]

Hey @franleplant, I understood your solution but I did not understand the problem you are facing.

You can easily do require('mqtt/dist/mqtt'), it should work. It's inside the package in the lastest versions, so there should be no problem.

[franleplant]

Wow, apparently I'm blind, I need 👓 . I did found however this in the gitignore https://github.com/mqttjs/MQTT.js/blob/master/.gitignore#L10 which might have confused me.

So, two more things before closing

• It'd be nice to have this stated in the docs instead of stating that the users need to manually build the browser package (I can help)
• Im getting this error while using the dist/mqtt

Unable to resolve module `./store` from `Users/flp/code/MyProject/node_modules/mqtt/dist/mqtt.js`

This is the way Im importing it

const mqtt = require('mqtt/dist/mqtt')

The mqtt dist are made with browserify and my project uses webpack and react native, there might be some incompatibilities with the module systems?

Thanks a lot for your help

[mcollina]

@franleplant that is highly possible. You probably have to have your webpack build it together with your application

[franleplant]

So, after all, Im not using webpack, React Native uses it's own build system (analogue to Webpack and Browserify): Packager

Some more relevant information about other's peoples problems: facebook/react-native#1871

Potential solution I've tested is ReactNativify but in the end it didn't work with mqtt lib.

TLDR
Since React-Native uses Packager, a lot of hybrid node.js packages that depend on node.js modules or their shims via browserify/webpack do not work on React Native.

[keyeh]

@franleplant In the end what was your solution for MQTT on React Native?

[franleplant]

hey @keyeh so after a lot of battling I ended up using https://github.com/rh389/react-native-paho-mqtt

It's rather immature and I've already had submit a patch but it's all that we got. Kudos to the author though, very responsive and nice to work with.

I'd love to use mqtt.js but I didn't find a way to easily make it work with React Native Packager.
Also the lib needs to accept WebSocket and LocalStorage implementations as parameters, since the React Native environment is different from the Browser, so things such as localStorage don't exist.

Paho let's you use whatever store that implements an interface as a replacement for LocalStorage.

I hope this helps.

[RangerMauve]

I'm going to be working on React-Native support within the next two weeks, I had an initial attempt that let me compile the module successfully, but it resulted in runtime errors. I'll post here when I have progress.

[franleplant]

@RangerMauve let me know if there is something I can take a look, give you feedback, give you PRs, because Im right now working on an RN App that uses mqtt, so I can live test it.

[RangerMauve]

@franleplant Thanks for the offer! Here's the PR I did to get the ball rolling and discussion around it: nodejs/readable-stream#258

The original problem was that readable-stream was trying to require the stream module which was causing RN's bundler to freak out because it didn't see that module anywhere in its dependency graph (since it's a node thing).

I added a fix to explicitly exclude the stream module for RN, but now the issue is that excluding it still returns an empty object, which will cause util.inherits to freak out.

My idea (when I get around it it, or somebody else does), is to add a check so that if Stream is required properly, we should add a check to see if it actually has some stream-related property defined before using it.

Something like

var Stream;
(function () {
  try {
    Stream = require('st' + 'ream');
  } catch (_) {} finally {
    if (!Stream) Stream = require('events').EventEmitter;
  }
  // This is the addiition
  if(!Stream.on) Stream =  require('events').EventEmitter;
})();

[RangerMauve]

You can try modifying the file in your node_modules folder to see if it works and if there's other issues that pop up.

[franleplant]

Cool, Im going to investigate a bit next week, if I can make my self some time.

Thanks a lot for your participation!

[RangerMauve]

Well, I'm going to get it to work by the end of April for sure since it's relevant to my day job. We've just been focusing on a react-native-web version first, so I hadn't gotten around it to it yet. :P

[franleplant]

Sorry for using this thread as a forum, feel free to kick me out but this info is interesting for mqtt and react native and the community and does not require any effort from the mqtt.js maintainers.

So, I tried to make mqtt.js work with React native and went through a bunch of hoops but I think I made some progress, Im stuck in a place right now which if I understand how to get out I will update this post with it, but perhaps someone can help me with this.

These are the steps that I took to get to the point where I am now.

• 1 npm install mqtt

• 2 Run this mqtt readme example somewhere in your app: https://github.com/mqttjs/MQTT.js#example

• 3 Install native dependencies

npm install url events path buffer assert

• 4 Shim native dependencies with browserify variants

In your package.json add these to your deps

"fs": "git://github.com/mafintosh/browserify-fs.git#06414a74bc0e1f3a92f1891ae27f5594692967b8",
"os": "git://github.com/CoderPuppy/os-browserify.git#af8f17481c8097e679ea24700c6bf18d497ba3a1",

These point to today's master's top of each repo, you can update the commit hash accordingly.

This step basically says to your dependency tree (i.e. mqtt.js dependencies) that when doing
require('fs') use instead this require('browserify-fs'), it is pretty dirty but requires minimal effort

• 5 Add Globals to your index.{ios,android}.js

Make sure it looks something like this

import React from 'react';
import { AppRegistry } from 'react-native';

// Define globally required stuff
GLOBAL.Buffer = require('buffer').Buffer;

// Some dependencies require process to be defined, so we comply with that
GLOBAL.process = {
  browser: true,
  env: {
    NODE_ENV: __DEV__ ? 'development' : 'production',
  }
}



// Make sure to use require instead of import syntax since the former
// will respect the order of things
const App = require('./app');

AppRegistry.registerComponent('MyApp', () => App);

• 6 Stuck

Get stuck with this error:

Cannot read property 'prototype' of undefined

Which basically refers to this file

node_modules/websocket-stream/server.js

var inherits = require('inherits')

// Server is undefined, and that is the problem
var WebSocketServer = require('ws').Server
var stream = require('./stream')

module.exports = Server

function Server(opts, cb) {
  if (!(this instanceof Server)) {
    return new Server(opts, cb)
  }

  WebSocketServer.call(this, opts)

  var proxied = false
  this.on('newListener', function(event) {
    if (!proxied && event === 'stream') {
      proxied = true
      this.on('connection', function(conn) {
        this.emit('stream', stream(conn, opts))
      })
    }
  })

  if (cb) {
    this.on('stream', cb)
  }
}

// In here, inherits tries to access WebSocketServer.prototype to
// do the inheritance but WebSocketServer is undefined
inherits(Server, WebSocketServer)

Im going to try to keep bashing at this, but if anyone has some insights they will be highly appreciated.

@RangerMauve probably this could be a very simple approach for resolving the mqtt.js in React Native problem