Web PubSub Client doesn't support React Native

[ghost]

• Package Name: @azure/web-pubsub-client
• Package Version: 1.0.0-beta.3
• Operating system: MacOS 13.14.1
• [x] nodejs
  • version: 18.14.1
• [ ] browser
  • name/version:
• [x] typescript
  • version: 4.9.5
• Is the bug related to documentation in
  • [ ] README.md
  • [ ] source code documentation
  • [ ] SDK API docs on https://docs.microsoft.com

Describe the bug

We are unable to use the library within React Native project version 0.71.3 with typescript because the library references node types that are not available within React Native and as such at runtime we get the following errors:

EventEmitter error:

error: Error: Unable to resolve module events from /Users/xxxx/dev/node_modules/@azure/web-pubsub-client/dist/index.js: events could not be found within the project or in these directories:
  node_modules/@azure/web-pubsub-client/node_modules
  node_modules
  5 | var abortController = require('@azure/abort-controller');
  6 | var coreUtil = require('@azure/core-util');
>  7 | var EventEmitter = require('events');
    |                             ^
  8 | var logger$1 = require('@azure/logger');
  9 | var buffer = require('buffer');
10 | var WebSocket = require('ws');
    at ModuleResolver.resolveDependency (/Users/xxxx/dev/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:162:15)
    at DependencyGraph.resolveDependency (/Users/xxxx/dev/node_modules/metro/src/node-haste/DependencyGraph.js:260:43)
    at Object.resolve (/Users/xxxx/dev/node_modules/metro/src/lib/transformHelpers.js:177:21)
    at Graph._resolveDependencies (/Users/xxxx/dev/node_modules/metro/src/DeltaBundler/Graph.js:432:35)
    at Graph._processModule (/Users/xxxx/dev/node_modules/metro/src/DeltaBundler/Graph.js:218:38)
    at async Graph._addDependency (/Users/xxxx/dev/node_modules/metro/src/DeltaBundler/Graph.js:314:20)
    at async Promise.all (index 4)
    at async Graph._processModule (/Users/xxxx/dev/node_modules/metro/src/DeltaBundler/Graph.js:263:5)
    at async Graph._addDependency (/Users/xxxx/dev/node_modules/metro/src/DeltaBundler/Graph.js:314:20)
    at async Promise.all (index 9)

WebSocket error:

error: Error: Unable to resolve module ws from /Users/xxxx/dev/node_modules/@azure/web-pubsub-client/dist/index.js:
None of these files exist:
  * node_modules/@azure/dist-esm/src/ws.browser.js(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * node_modules/@azure/dist-esm/src/ws.browser.js/index(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  8 | var logger$1 = require('@azure/logger');
  9 | var buffer = require('buffer');
> 10 | var WebSocket = require('ws');
    |                          ^
11 |
12 | function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13 |
    at ModuleResolver.resolveDependency (/Users/xxxx/dev/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:137:15)
    at DependencyGraph.resolveDependency (/Users/xxxx/dev/node_modules/metro/src/node-haste/DependencyGraph.js:260:43)
    at Object.resolve (/Users/xxxx/dev/node_modules/metro/src/lib/transformHelpers.js:177:21)
    at Graph._resolveDependencies (/Users/xxxx/dev/node_modules/metro/src/DeltaBundler/Graph.js:432:35)
    at Graph._processModule (/Users/xxxx/dev/node_modules/metro/src/DeltaBundler/Graph.js:218:38)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Graph._addDependency (/Users/xxxx/dev/node_modules/metro/src/DeltaBundler/Graph.js:314:20)
    at async Promise.all (index 4)
    at async Graph._processModule (/Users/xxxx/dev/node_modules/metro/src/DeltaBundler/Graph.js:263:5)
    at async Graph._addDependency (/Users/xxxx/dev/node_modules/metro/src/DeltaBundler/Graph.js:314:20)

To Reproduce Steps to reproduce the behavior:

1. Add npm install @azure/web-pubsub-client
2. Reference the library as per the readme
3. Attempt to compile the React Native App
4. The described error occurs

Expected behavior

The library should work as expected and connect to Web PubSub

Screenshots If applicable, add screenshots to help explain your problem.

Additional context

We have used the following patch file to fix the issue (although there maybe a better solution):

diff --git a/node_modules/@azure/web-pubsub-client/dist/index.js b/node_modules/@azure/web-pubsub-client/dist/index.js
index 86204a2..b76df2d 100644
--- a/node_modules/@azure/web-pubsub-client/dist/index.js
+++ b/node_modules/@azure/web-pubsub-client/dist/index.js
@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });

 var abortController = require('@azure/abort-controller');
 var coreUtil = require('@azure/core-util');
-var EventEmitter = require('events');
+var EventEmitter = require('eventemitter3');
 var logger$1 = require('@azure/logger');
 var buffer = require('buffer');
-var WebSocket = require('ws');
+var WebSocket = global.WebSocket;

 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

[xirzec]

Some amount of polyfills are probably necessary, see our react-native sample here: https://github.com/Azure/azure-sdk-for-js/tree/main/samples/frameworks/react-native/appconfigBasic#add-polyfills

/cc @jeremymeng for when he's back

[xirzec]

It's also possible we need to add some react-native overrides to the package itself

[jeremymeng]

It's also possible we need to add some react-native overrides to the package itself

yes, we would want to add a react-native mapping like below so react-native could use https://github.com/Azure/azure-sdk-for-js/blob/main/sdk/web-pubsub/web-pubsub-client/src/ws.browser.ts#L1