mirror of
https://github.com/facebook/react-native.git
synced 2024-11-21 21:20:50 +00:00
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:
parent
bae63d492f
commit
e37e53086a
@ -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
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user