Skip to content

Commit

Permalink
fix: use import for event-target-shim to support mjs (#38628)
Browse files Browse the repository at this point in the history
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](expo/expo#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: #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.
- expo/expo#23528 works.

Reviewed By: NickGerleman

Differential Revision: D47816854

Pulled By: TheSavior

fbshipit-source-id: ebaf2e7a3ec02ae61effa004058589053601b766
  • Loading branch information
EvanBacon authored and facebook-github-bot committed Jul 27, 2023
1 parent bae63d4 commit e37e530
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 3 deletions.
3 changes: 1 addition & 2 deletions packages/react-native/Libraries/Blob/FileReader.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/react-native/Libraries/Network/XMLHttpRequest.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit e37e530

Please sign in to comment.