[Bug]: React Native - Unable to resolve module stream

[berg-dee]

MQTTjs Version

5.11.0

Broker

mosquitto

Environment

Browser

Description

Hi,

I've been using this library on version 5.10.4 in a react native environment without any issues for a while, I've followed the instructions to add url and buffer since they are not available in the react native environment out of the box. But since version 5.11.0 it's having issues with stream

 (NOBRIDGE) ERROR  [Error: undefined Unable to resolve module stream from /Users/bergdee/Documents/code/app/node_modules/mqtt/build/lib/connect/socks.js: stream could not be found within the project or in these directories:
  node_modules/mqtt/node_modules
  node_modules
  39 | exports.default = openSocks;
  40 | const debug_1 = __importDefault(require("debug"));
> 41 | const stream_1 = require("stream");
     |                           ^
  42 | const socks_1 = require("socks");
  43 | const dns = __importStar(require("dns"));
  44 | const util_1 = require("util");]
iOS Bundling failed 1470ms node_modules/expo-router/entry.js (1 module)
The package at "node_modules/mqtt/build/lib/connect/socks.js" attempted to import the Node standard library module "stream".
It failed because the native React runtime does not include the Node standard library.
Learn more: https://docs.expo.dev/workflow/using-libraries/#using-third-party-libraries

If I try to resolve this by installing stream npm i stream, I'm followed by the next issue

The package at "node_modules/mqtt/build/lib/connect/socks.js" attempted to import the Node standard library module "dns".

Does anyone know how to solve/polyfill this for react-native?

Minimal Reproduction

Install 5.11.0 in a react native environment

Debug logs

[robertsLando]

@berg-dee This problem is due to #1002 , let's see if @DirtyHairy socks should only be enabled in non-browser envs. Could you fix this please?

[DirtyHairy]

Hm, this is a bundling issue in the same vein as the dependencies on url and buffer. No SOCKS specific code is executed at runtime unless it is enabled explicitly, but a bundler will obviously try to bundle the socks connector it, together with all dependencies.

I don't know of any fix other than stubbing the dependencies via external libraries or via bundler configuration. In esbuild I work around by stubbing out the socks connector in the bundler configuration. I can try to work around by using a dynamic import, but I am pretty sure that the bundler will complain nevertheless.

@berg-dee What bundler is react-native using? Can you use the browser build of MQTT.js? This would allow you to skip buffer, url and stream as well.

[berg-dee]

Hm, this is a bundling issue in the same vein as the dependencies on url and buffer. No SOCKS specific code is executed at runtime unless it is enabled explicitly, but a bundler will obviously try to bundle the socks connector it, together with all dependencies.

I don't know of any fix other than stubbing the dependencies via external libraries or via bundler configuration. In esbuild I work around by stubbing out the socks connector in the bundler configuration. I can try to work around by using a dynamic import, but I am pretty sure that the bundler will complain nevertheless.

@berg-dee What bundler is react-native using? Can you use the browser build of MQTT.js? This would allow you to skip buffer, url and stream as well.

Thanks for the reply,

The reason I was adding buffer and url initially was due to this example project https://github.com/MaximoLiberata/react-native-mqtt.js-example that the Readme was linking to on how to run this with React Native.

I'll try to specifically import the browser build and see if that helps. React Native uses their own bundler called Metro and their own JS engine called Hermes

[berg-dee]

I can confirm that latest version works when importing specifically from 'mqtt/dist/mqtt.esm', only importing from 'mqtt' causes this issue.

I guess this is an issue with the react-native metro bundler not picking up the correct build as say Webpack or Vite would do?

[robertsLando]

I can confirm that latest version works when importing specifically from 'mqtt/dist/mqtt.esm', only importing from 'mqtt' causes this issue.

Yeah this should be automatically handled by the bundler BTW:

https://github.com/mqttjs/MQTT.js/blob/main/package.json#L38-L58

[berg-dee]

But React Native can be compiled for web with react-native-web package, in that case it will use the browser export. It seems the react-native developers though of this and added their own react-native export field https://reactnative.dev/blog/2023/06/21/package-exports-support#the-new-react-native-condition

[robertsLando]

But React Native can be compiled for web with react-native-web package, in that case it will use the browser export. It seems the react-native developers though of this and added their own react-native export field reactnative.dev/blog/2023/06/21/package-exports-support#the-new-react-native-condition

Oh was not aware of that! @MaximoLiberata could you test that?

[MaximoLiberata]

I´ve tested the example with 'mqtt/dist/mqtt.esm' directly, as well as with exports field package.json pointing to same .esm bundle, and it worked fine.

To enable package exports in RN, I had to add a metro.config.js file and set the unstable_enablePackageExports option. As of now, it's still considered an unstable feature.

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.unstable_enablePackageExports = true;

module.exports = config;

We can update RN example to use 'mqtt/dist/mqtt.esm' now, since it's working well. Also, adding react-native to exports field in the MQTT.JS package.json for future support.

Thanks for the hints!

[robertsLando]

@MaximoLiberata could you open a PR with the updated exports please?

[berg-dee]

Cheers guys! Thanks a lot for the help and input

[berg-dee]

@MaximoLiberata Just FYI, since the new react native release just recently the unstable_enablePackageExports is no longer needed as it's the default now. If you want to update your example repo :)