Expo / React Native not having support for 'events'

[thomasgrivet]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 18 or higher

Node.js version

21.1.0

Reproduction repository

https://github.com/Cocolis-1/blank-expo/tree/feat/msw

Reproduction steps

Try to start the bundler using yarn start and start your dev client.

Current behavior

You should see the following error:

iOS Bundling failed
The package at "node_modules/msw/lib/native/index.js" attempted to import the Node standard library module "events".
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

Expected behavior

MSW should not depend on node:events (if possible) so that React Native users can use it.
I think the commit introducing node:events is this one.
Let me know if I can help in any way!

Thanks!

[mattcosta7]

hmmm

I wonder if here:

msw/src/node/SetupServerApi.ts

Lines 53 to 91 in 15e3006

	private init(): void {
	this.interceptor.on('request', async ({ request, requestId }) => {
	/**
	* @note React Native doesn't have "node:events".
	*/
	if (typeof setMaxListeners === 'function') {
	// Bump the maximum number of event listeners on the
	// request's "AbortSignal". This prepares the request
	// for each request handler cloning it at least once.
	// Note that cloning a request automatically appends a
	// new "abort" event listener to the parent request's
	// "AbortController" so if the parent aborts, all the
	// clones are automatically aborted.
	try {
	setMaxListeners(
	Math.max(defaultMaxListeners, this.currentHandlers.length),
	request.signal,
	)
	} catch (error: unknown) {
	/**
	* @note Mock environments (JSDOM, ...) are not able to implement an internal
	* "kIsNodeEventTarget" Symbol that Node.js uses to identify Node.js `EventTarget`s.
	* `setMaxListeners` throws an error for non-Node.js `EventTarget`s.
	* At the same time, mock environments are also not able to implement the
	* internal "events.maxEventTargetListenersWarned" Symbol, which results in
	* "MaxListenersExceededWarning" not being printed by Node.js for those anyway.
	* The main reason for using `setMaxListeners` is to suppress these warnings in Node.js,
	* which won't be printed anyway if `setMaxListeners` fails.
	*/
	if (
	!(
	isNodeExceptionLike(error) &&
	error.code === 'ERR_INVALID_ARG_TYPE'
	)
	) {
	throw error
	}
	}
	}

maybe we can move to a dynamic import?

...

try {
   const events = await import("node:events")
   const {setMaxListeners, defaultMaxListeners} = events
....

or something along those lines to avoid a static build failure? and fix support?

[DogukanTansuk]

Is there any update? And how can I help?

[mattcosta7]

Is there any update? And how can I help?

I haven't ever run anything with react-native or expo, and haven't had a chance to get everything setup

If you install patch-package and modfiy the built code of the file I showed above, to require lazily? Although that might be good enough in this case

Another option could be - if you yarn add events does that polyfill apply well enough?
EAS seems to build with node 16, but 18 is the minimum for msw. Is it possible to update to use node 18+?
(I only had a few minutes to try to get it setup this morning, and failed to do so)

[mattcosta7]

https://github.com/browserify/events

this is the events polyfill that I believe should work across js engines and maybe good enough to replace the issue in your environment?

[mattcosta7]

One other option might be something like - https://github.com/parshap/node-libs-react-native which uses that events module under the hood it seems (to this was a very cursory look)

[kettanaito]

I wonder, do React Native bundlers support some export conditions, like react-native? We could do a placeholder module for node:events that would still be a root-level import that resolves to different things based on the environment.

// src/utils/nodeEvents.ts
export * from 'node:events'

// src/utils/nodeEvents.react-native.ts
export {}

// package.json
{
  "exports": {
    "./src/utils/nodeEvents.ts": {
      "react-native": "./src/utils/nodeEvents.react-native.ts",
      "default": "./src/utils/nodeEvents.ts"
    }
  }
}

This is a very loose example of what I mean.

[kettanaito]

I went with @mattcosta7's suggestion with the lazy import of node:events in #1858. @mattcosta7, could you please give that PR a look? Does it look right to you?

[DogukanTansuk]

I went with @mattcosta7's suggestion with the lazy import of node:events in #1858. @mattcosta7, could you please give that PR a look? Does it look right to you?

Did you try those changes with the bare React-Native project? Or just make the changes and build it?

[kettanaito]

@DogukanTansuk, no, I haven't. I'm not a React Native developer and I don't even have enough space on my machine to install XCode to run React Native (but I heard you don't need it?). You are free to give those changes a try by installing MSW from a particular branch/commit, which is supported by all package managers 🙌

By the way, if you work with React Native, you can help us a lot by testing this, and other things out in regards to MSW integration. We are looking for someone to pave the way for MSW integration in React Native: report issues, try releases, submit a usage example, and validate our Integration docs. If that sounds interesting to you, let me know.