Mqtt.js: MQTT doesn't work in React

[gbaranski]

hello, I'm trying to establish connection using mqtt library, but it seems like it doesn't work properly. Using CDN is not best approach when using react. Any idea for that?

Here is code that I execute on initialState

import { connect, MqttClient } from 'mqtt';

export const connectMqtt = (token: string, uid: string) => {
  return new Promise<MqttClient>((resolve, reject) => {
    const client = connect(BROKER_URL, {
      clientId: 'app_web',
      username: uid,
      password: token,
    });
    client.on('connect', () => {
      resolve(client);
    });
    client.on('error', reject);
  });
};

Here is stacktrace

net.createConnection is not a function
    at Object.streamBuilder (umi.js:161722)
    at MqttClient.wrapper [as streamBuilder] (umi.js:161678)
    at MqttClient../node_modules/mqtt/lib/client.js.MqttClient._setupStream (umi.js:159932)
    at new MqttClient (umi.js:159908)
    at connect (umi.js:161681)
    at umi.js:250860
    at new Promise (<anonymous>)
    at connectMqtt (umi.js:250859)
    at _callee$ (umi.js:247994)
    at tryCatch (umi.js:85025)
    at Generator.invoke [as _invoke] (umi.js:85245)
    at Generator.prototype.<computed> [as next] (umi.js:85078)
    at asyncGeneratorStep (umi.js:83332)
    at _next (umi.js:83354)

AB#8667519

[Anubarak]

I have the same problem, this is because ´net` is an empty object in client side web applications.
The question is: can / will this be fixed anywhere soon?
I guess there is a similar issue here https://github.com/mqttjs/MQTT.js/issues/1140 but I cannot wait a month for a fix.
Is there some quick and dirty solution for it?

[YoDaMa]

@Anubarak what about using MQTT over Websockets?

[Anubarak]

@YoDaMa It's actually the first time I'm using MQTT and I don't know much about it.
Can you eventually provide a code sample how to do that? I have a third party API that works via MQTT and they just gave me a url and a port and here I am with the same error as above

[YoDaMa]

if you're working with an API that doesn't accept MQTT over websockets, then you may be out of luck. But look here for an example of a websocket configuration: https://github.com/mqttjs/MQTT.js/blob/master/examples/ws/client.js

[Anubarak]

Thank you, unfortunately this does not work, it always closes the connection without errors.
What's the current issue in this library?

I tried it with Paho MQTT and that worked, but that one only has one single callback for all incoming messages/channels

[YoDaMa]

@Anubarak there might be a bug. We unfortunately have not set up testing for react yet.

[Anubarak]

@YoDaMa I don't use it with react. It's just a simple blank webpack project where I receive the same error as above.

[gbaranski]

so is it possible to use it in react?

[nosovk]

Yep, I've made test (but I use emqx, not paho) and it works in webpack 4. Due to changes in node shim default behaviour webpack 5 wouldn't work with mqtt.js. Please check yours webpack version.

[gbaranski]

Just checked, and it works, thanks :)

[anUniqueBoy]

hello, do you solve this issue? i have the same issue in vue project。how could this be resolved
Error in mounted hook: "TypeError: net.createConnection is not a function"

[gbaranski]

@anUniqueBoy yes, i solved it just do

npm install -g webpack

npm install mqtt
cd node_modules/mqtt
npm install .
webpack mqtt.js --output-library mqtt

Updating official documentation to this example should help people with problems like that

[qm3ster]

Is there any particular reason, such as licensing, why such an esoteric build process is required?
Why can't this project just publish a browser-compatible build, potentially as a separate npm package?

Also any chance we can get rid of es6-map dependency? It's the worst offender.

Does this project actually support nodejs 4.0 as per package.json or has that just not been updated and it's somewhat closer to what is currently supported? Say, 8.0?

[moliyu]

do this change in package.json

"mqtt":"4.1.0"

and then "npm install"

[moliyu]

@moliyu

1. Who are you talking to?
2. What are you talking about?

what i mean is try the lower version can solve this problem

[YoDaMa]

@qm3ster

Does this project actually support nodejs 4.0 as per package.json or has that just not been updated and it's somewhat closer to what is currently supported? Say, 8.0?

Yes the project does not support nodejs 4.0 as per package.json, that is a bug that should be fixed. Current support is Node v10 based on testing infrastructure.

[anUniqueBoy]

I used 4.2.1 to report an error, so I dropped it directly to 4.0.1

[qm3ster]

@YoDaMa I put my mouth where my money is and did a little #1167 over there.
Please take a look, I am extremely foreign to this project. I am merely a user.

[gbaranski]

the newest version works great in react actually

[YoDaMa]

could someone in this thread hammer out a react testing pipeline for the github actions gate? It would be good to validate things work on new commits.