From ea69f202748a09c7e40504bd8bd9147774b62da8 Mon Sep 17 00:00:00 2001
From: evanbacon <bacon@expo.io>
Date: Wed, 26 Jul 2023 22:32:54 -0700
Subject: [PATCH] fix: use import for event-target-shim to support mjs (#38628)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary:
The React Native community almost exclusively adds `mjs` support with something like: `config.resolver.sourceExts.push("mjs");` which causes `js` to be resolved before `mjs`. Mainstream bundlers will do the opposite, resolving `mjs` then `js`, unless bundling for Node.js environments.

`event-target-shim` has a `.js` and `.mjs` entry, when we [attempt to implement _community-standard_ resolution in Metro](https://github.com/expo/expo/pull/23528) the app fails to open on iOS––providing no indication of what failed. The issue here is that the `mjs` exports for `event-target-shim` don't support `module.exports = function() {}`, so we need to update some of the imports in `react-native` (note that one of the imports to `event-target-shim` already uses `import/export`).

### Discovery

For future readers––to discover this bug, I wrote a custom Metro resolver which printed a list of any `mjs` file that was resolved. In a basic app we observe the following:

```
/node_modules/react-native/Libraries/Core/setUpXHR.js > /node_modules/abort-controller/dist/abort-controller.mjs
/node_modules/react-native/Libraries/Network/XMLHttpRequest.js > /node_modules/event-target-shim/dist/event-target-shim.mjs
/node_modules/react-native/Libraries/WebSocket/WebSocket.js > /node_modules/event-target-shim/dist/event-target-shim.mjs
/node_modules/react-native/Libraries/Blob/FileReader.js > /node_modules/event-target-shim/dist/event-target-shim.mjs
/node_modules/abort-controller/dist/abort-controller.mjs > /node_modules/event-target-shim/dist/event-target-shim.mjs
```

In all cases the mjs files are resolved via `react-native` importing third-party packages, specifically `abort-controller` and `event-target-shim`. I modified the custom Metro resolver to ignore mjs resolution in different files until I found the problematic imports. This revealed that the exports were changing in `event-target-shim` between mjs and js.

Further, this was difficult to discover because the code that attempts to invoke an object as a function (error) is happening during the React Native networking setup. Ideally this JS code would be isolated from the user's bundler configuration and therefore impossible to break.

## Changelog:

[GENERAL] [FIXED] - Update `event-target-shim` import to support Metro resolving `mjs` modules before `js`.

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: https://github.com/facebook/react-native/pull/38628

Test Plan:
- If you add `mjs` support to the `metro.config.js` file **before** js (`config.resolver.sourceExts.unshift("mjs");`), the project should be capable of starting.
- Usage with the default `metro.config.js` setup works as well.
- https://github.com/expo/expo/pull/23528 works.

Reviewed By: NickGerleman

Differential Revision: D47816854

Pulled By: TheSavior

fbshipit-source-id: ebaf2e7a3ec02ae61effa004058589053601b766
---
 packages/react-native/Libraries/Blob/FileReader.js        | 3 +--
 packages/react-native/Libraries/Network/XMLHttpRequest.js | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react-native/Libraries/Blob/FileReader.js b/packages/react-native/Libraries/Blob/FileReader.js
index 3e20afe5c6e1a7..f8154bd237368f 100644
--- a/packages/react-native/Libraries/Blob/FileReader.js
+++ b/packages/react-native/Libraries/Blob/FileReader.js
@@ -12,8 +12,7 @@ import type Blob from './Blob';
 
 import NativeFileReaderModule from './NativeFileReaderModule';
 import {toByteArray} from 'base64-js';
-
-const EventTarget = require('event-target-shim');
+import EventTarget from 'event-target-shim';
 
 type ReadyState =
   | 0 // EMPTY
diff --git a/packages/react-native/Libraries/Network/XMLHttpRequest.js b/packages/react-native/Libraries/Network/XMLHttpRequest.js
index f66d194863a457..e6191b10f7b560 100644
--- a/packages/react-native/Libraries/Network/XMLHttpRequest.js
+++ b/packages/react-native/Libraries/Network/XMLHttpRequest.js
@@ -13,12 +13,12 @@
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
+import EventTarget from 'event-target-shim';
 
 const BlobManager = require('../Blob/BlobManager');
 const GlobalPerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
 const RCTNetworking = require('./RCTNetworking').default;
 const base64 = require('base64-js');
-const EventTarget = require('event-target-shim');
 const invariant = require('invariant');
 
 const DEBUG_NETWORK_SEND_DELAY: false = false; // Set to a number of milliseconds when debugging