React Native Support

[MaximoLiberata]

In the version 5.5.2 was fixed an issue that didn't allow use MQTT.js in React Native (RN). The motivation of this discussion is bring a example of how to implement MQTT.js in React Native and also maybe bring ideas of enhancements for RN environment.

You can see the example in React Native MQTT.js Implementation

[robertsLando]

@MaximoLiberata Thanks! Could you kindly add a link to this on readme please?

[MaximoLiberata]

Hi @robertsLando, thanks to you!

I opened the PR #1842

[robertsLando]

Wondering if this is still needed? https://github.com/MaximoLiberata/react-native-mqtt.js-example/blob/main/App.js#L8

[robertsLando]

Just to be sure, is react native using the browser bundle? If so I think this could be easily fixed by patching the esbuild bundle here: https://github.com/mqttjs/MQTT.js/blob/main/esbuild.js

Maybe by adding a new entry on "define" or manually adding the polifilly on top of the output bundfle, could you guys do some tries?

[MaximoLiberata]

I tried to use the browser bundle, but they threw a exeption:

import * as mqtt from 'mqtt/dist/mqtt' → Return {"default": {}}
import * as mqtt from 'mqtt/dist/mqtt.min' → Return {"default": {}}
import mqtt from 'mqtt/dist/mqtt.esm' → Throw Error: ws does not work in the browser. Browser clients must use the native WebSocket object

React Native doesn't use the browser bundle, I think its behavior is closer to node.js than browser.

Also, I tried to add a piece of code in the src/index.ts file and worked:

import { isReactNativeBrowser } from './lib/is-browser'

import * as mqtt from './mqtt'

if (isReactNativeBrowser && typeof process?.nextTick !== 'function') {
	process.nextTick = (callback: () => void) => {
		setTimeout(callback, 0)
	}
}

export default mqtt
export * from './mqtt'

Not is the best solution, this change also modify the process object in the global scope.

[abdelhameedhamdy]

@MaximoLiberata

I just tried adding this block

if (typeof process?.nextTick !== 'function') {
	process.nextTick = setImmediate;
}

or, same like

if (typeof process?.nextTick !== 'function') {
	process.nextTick = (callback: () => void) => {
		setTimeout(callback, 0)
	}
}

in https://github.com/mqttjs/MQTT.js/blob/main/src/lib/connect/index.ts#L11

I think it fixed it, without needs to add it at top of RN App.

If you can have a look to check if that might be a proper solution.

[abdelhameedhamdy]

@MaximoLiberata Did the last proposed solution fix the issue!

[MaximoLiberata]

Yes, I tested in the RN APP example and it worked well.

[abdelhameedhamdy]

Good, I think this update might work with release v5.5.1 as a fix, I am not sure, needs to best tested.
If it did not, so v5.5.2 needs to add this update with a new PR in your current RN mqtt.js fork.

[robertsLando]

I tried to use the browser bundle, but they threw a exeption:

Nope what I meant is if react is actually using the browser bundle or not, the bundle is automatically served based on the package.json exports field if it detects a browser env, otherwise the "node" version is serverd.

I think that adding:

if (isReactNativeBrowser && typeof process?.nextTick !== 'function') {
	process.nextTick = (callback: () => void) => {
		setTimeout(callback, 0)
	}
}

to the connect/index.ts isn't so bad, someone wants to submit a PR?

[abdelhameedhamdy]

@robertsLando
I just tested it vs v5.5.1, it works well with just updating connect/index.ts, and only the first commit by @MaximoLiberata in BufferedDuplex.ts
which needs importing Buffer package.

So, I am not sure that other commits in (fc8fafb) are required, as no error appears for me at least. may be required for other issue.

just this block in connect/index.ts, and importing Buffer

if (typeof process?.nextTick !== 'function') {
	process.nextTick = setImmediate;
}

even no need for importing isReactNativeBrowser() in connect/index.ts

with regards to using setImmediate or setTimeout(callback, 0)
I searched for the difference between both, and it seems that it is preferred to use setImmediate.

[abdelhameedhamdy]

Just to update, my issue was that process.nextTick is not a function was blocking my RN App to connect to the broker.
(fc8fafb) was solving a different issue other than mine, so the new proposed fix for resolving the issue to add a block of code at start of RN App to let it work.

So, just a PR is required to fix the process.nextTick is not a function error for RN Apps.

[abdelhameedhamdy]

Another notice here, I did not get this error: Cannot create URL for blob (#1840) in my RN App; as I am setting timerVariant: "native" not "auto".

[robertsLando]

Another notice here, I did not get this error: Cannot create URL for blob (#1840) in my RN App; as I am setting timerVariant: "native" not "auto".

Yeah that's the solution I suggested at start in the issue

[abdelhameedhamdy]

@robertsLando I just opened PR #1849.