fix: use import for event-target-shim to support mjs (#38628)

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
This commit is contained in:
evanbacon 2023-07-26 22:32:54 -07:00 committed by Facebook GitHub Bot
parent bae63d492f
commit e37e53086a
2 changed files with 2 additions and 3 deletions

View File

@ -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

View File

@ -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