react-native Unable to resolve module path: /node_modules/rhea/lib/connection.js

[MykhailoButkevych-PE]

• Package Name: @azure/service-bus
• Package Version: 7.8.0
• Operating system: macos 13.0.1
• nodejs
  • version: 18.12.1
• react-native
  • name/version: 0.71.3
• typescript
  • version: 4.8.4
• Is the bug related to documentation in
  • README.md
  • source code documentation
  • SDK API docs on https://docs.microsoft.com

Describe the bug
Creating new instance of ServiceBusClient, for example: const serviceBusClient = new ServiceBusClient( 'Endpoint=sb://my-namespace.servicebus.windows.net/;SharedAccessKeyName=RootManageSharedAccessKey;SharedAccessKey=abc123xyz456', );

throws error:

error: Error: Unable to resolve module path from /Users/me/AwesomeProject/node_modules/rhea/lib/connection.js: path could not be found within the project or in these directories:
node_modules/rhea/node_modules
node_modules
27 | var fs = require('fs');
28 | var os = require('os');
29 | var path = require('path');

To Reproduce
Steps to reproduce the behavior:

1. Create new react-native app: npx react-native@latest init AwesomeProject
2. Install package: https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/servicebus/service-bus/#install-the-package
3. Configure ts: https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/servicebus/service-bus/#configure-typescript
4. Import & create serviceBusClient instance in App.tsx, for example: const serviceBusClient = new ServiceBusClient( 'Endpoint=sb://my-namespace.servicebus.windows.net/;SharedAccessKeyName=RootManageSharedAccessKey;SharedAccessKey=abc123xyz456', );
5. Error appears.

Expected behavior
There shouldn't be an issue with resolving module path.

[jeremymeng]

Thanks for reporting this @MykhailoButkevych-PE! path is one of the NodeJS module that rhea depends on so we need to provide a polyfill for it when running in a non-NodeJS environment. I will take a look.

[jeremymeng]

@MykhailoButkevych-PE please check out the steps in our react-native sample for AMQP messaging SDKs (Event Hubs and Service Bus)
https://github.com/Azure/azure-sdk-for-js/blob/main/samples/frameworks/react-native-expo/ts/messaging/README.md

Even though the sample is using Expo, I just tried and found that the same steps can also be applied to a project created by npx react-native@latest init

[jeremymeng]

The sample linked above uses node-libs-react-native package for polyfills. For our Service Bus SDK, only four polyfills are actually used:

• buffer
• path-browserify
• process
• os-browserfify

so the steps to add them are:

• yarn add buffer os-browserify path-browserify process
• metro.config.js

module.exports = {
  resolver: {
    extraNodeModules: {
      buffer: require.resolve('buffer/'),
      path: require.resolve('path-browserify'),
      process: require.resolve('process/browser.js'),
      os: require.resolve('os-browserify/browser.js'),
    },
  },
  // ...
}

• App.tsx before importing Azure Service Bus SDK

global.Buffer = require('buffer').Buffer;
global.process = require('process');

import 'react-native-get-random-values';

[MykhailoButkevych-PE]

@jeremymeng Thanks for help, now it's working!

[jeremymeng]

@MykhailoButkevych-PE Glad to hear!