[Flare] Move unstable_createEventComponent to ReactDOM (#15890)

2026-01-15 12:15:22 +00:00 · 2019-06-18 23:41:00 +01:00
parent 98454371a9
commit 689beef6f5
20 changed files with 318 additions and 290 deletions
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -42,6 +42,7 @@ import {
 } from 'react-reconciler/inline.dom';
 import {createPortal as createPortalImpl} from 'shared/ReactPortal';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
+import createEventComponent from 'shared/createEventComponent';
 import {setBatchingImplementation} from 'events/ReactGenericBatching';
 import {
  setRestoreImplementation,
@@ -63,7 +64,10 @@ import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
 import lowPriorityWarning from 'shared/lowPriorityWarning';
 import warningWithoutStack from 'shared/warningWithoutStack';
-import {enableStableConcurrentModeAPIs} from 'shared/ReactFeatureFlags';
+import {
+  enableStableConcurrentModeAPIs,
+  enableEventAPI,
+} from 'shared/ReactFeatureFlags';

 import {
  getInstanceFromNode,
@@ -877,6 +881,10 @@ if (enableStableConcurrentModeAPIs) {
  ReactDOM.createSyncRoot = createSyncRoot;
 }

+if (enableEventAPI) {
+  ReactDOM.unstable_createEventComponent = createEventComponent;
+}
+
 const foundDevTools = injectIntoDevTools({
  findFiberByHostInstance: getClosestInstanceFromNode,
  bundleType: __DEV__ ? 1 : 0,
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -13,7 +13,7 @@ import {registrationNameModules} from 'events/EventPluginRegistry';
 import warning from 'shared/warning';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import warningWithoutStack from 'shared/warningWithoutStack';
-import type {ReactEventResponderEventType} from 'shared/ReactTypes';
+import type {ReactDOMEventResponderEventType} from 'shared/ReactDOMTypes';
 import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
 import {
  setListenToResponderEventTypes,
@@ -1287,7 +1287,7 @@ export function restoreControlledState(
 }

 export function listenToEventResponderEventTypes(
-  eventTypes: Array<ReactEventResponderEventType>,
+  eventTypes: Array<ReactDOMEventResponderEventType>,
  element: Element | Document,
 ): void {
  if (enableEventAPI) {
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -46,6 +46,7 @@ import dangerousStyleValue from '../shared/dangerousStyleValue';

 import type {DOMContainer} from './ReactDOM';
 import type {ReactEventComponentInstance} from 'shared/ReactTypes';
+import type {ReactDOMEventResponder} from 'shared/ReactDOMTypes';
 import {
  mountEventResponder,
  unmountEventResponder,
@@ -101,6 +102,7 @@ export type UpdatePayload = Array<mixed>;
 export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
+export type EventResponder = ReactDOMEventResponder;

 import {
  enableSuspenseServerRenderer,
@@ -905,7 +907,10 @@ export function mountEventComponent(
    const doc = rootContainerInstance.ownerDocument;
    const documentBody = doc.body || doc;
    const responder = eventComponentInstance.responder;
-    const {rootEventTypes, targetEventTypes} = responder;
+    const {
+      rootEventTypes,
+      targetEventTypes,
+    } = ((responder: any): ReactDOMEventResponder);
    if (targetEventTypes !== undefined) {
      listenToEventResponderEventTypes(targetEventTypes, documentBody);
    }
--- a/packages/react-dom/src/events/DOMEventResponderSystem.js
+++ b/packages/react-dom/src/events/DOMEventResponderSystem.js
@@ -18,13 +18,15 @@ import {
  HostComponent,
 } from 'shared/ReactWorkTags';
 import type {
-  ReactEventResponder,
-  ReactEventResponderEventType,
  ReactEventComponentInstance,
-  ReactResponderContext,
-  ReactResponderEvent,
  EventPriority,
 } from 'shared/ReactTypes';
+import type {
+  ReactDOMEventResponder,
+  ReactDOMEventResponderEventType,
+  ReactDOMResponderContext,
+  ReactDOMResponderEvent,
+} from 'shared/ReactDOMTypes';
 import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
 import {
  batchedEventUpdates,
@@ -95,7 +97,7 @@ const rootEventTypesToEventComponentInstances: Map<
  Set<ReactEventComponentInstance>,
 > = new Map();
 const targetEventTypeCached: Map<
-  Array<ReactEventResponderEventType>,
+  Array<ReactDOMEventResponderEventType>,
  Set<string>,
 > = new Map();
 const ownershipChangeListeners: Set<ReactEventComponentInstance> = new Set();
@@ -116,7 +118,7 @@ let currentInstance: null | ReactEventComponentInstance = null;
 let currentEventQueue: null | EventQueue = null;
 let currentTimerIDCounter = 0;

-const eventResponderContext: ReactResponderContext = {
+const eventResponderContext: ReactDOMResponderContext = {
  dispatchEvent(
    possibleEventObject: Object,
    listener: ($Shape<PartialEventObject>) => void,
@@ -186,7 +188,7 @@ const eventResponderContext: ReactResponderContext = {
    eventListeners.set(eventObject, listener);
    eventQueue.events.push(eventObject);
  },
-  isEventWithinTouchHitTarget(event: ReactResponderEvent): boolean {
+  isEventWithinTouchHitTarget(event: ReactDOMResponderEvent): boolean {
    validateResponderContext();
    const target = event.target;
    const nativeEvent = event.nativeEvent;
@@ -254,7 +256,9 @@ const eventResponderContext: ReactResponderContext = {
    }
    return false;
  },
-  addRootEventTypes(rootEventTypes: Array<ReactEventResponderEventType>): void {
+  addRootEventTypes(
+    rootEventTypes: Array<ReactDOMEventResponderEventType>,
+  ): void {
    validateResponderContext();
    const activeDocument = getActiveDocument();
    listenToResponderEventTypesImpl(rootEventTypes, activeDocument);
@@ -265,7 +269,7 @@ const eventResponderContext: ReactResponderContext = {
    }
  },
  removeRootEventTypes(
-    rootEventTypes: Array<ReactEventResponderEventType>,
+    rootEventTypes: Array<ReactDOMEventResponderEventType>,
  ): void {
    validateResponderContext();
    for (let i = 0; i < rootEventTypes.length; i++) {
@@ -375,7 +379,7 @@ const eventResponderContext: ReactResponderContext = {
  },
  getActiveDocument,
  objectAssign: Object.assign,
-  getEventCurrentTarget(event: ReactResponderEvent): Element {
+  getEventCurrentTarget(event: ReactDOMResponderEvent): Element {
    validateResponderContext();
    const target = event.target;
    let fiber = getClosestInstanceFromNode(target);
@@ -531,13 +535,13 @@ function processTimers(
  }
 }

-function createResponderEvent(
+function createDOMResponderEvent(
  topLevelType: string,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: Element | Document,
  passive: boolean,
  passiveSupported: boolean,
-): ReactResponderEvent {
+): ReactDOMResponderEvent {
  const {pointerType} = (nativeEvent: any);
  let eventPointerType = '';
  let pointerId = null;
@@ -589,7 +593,7 @@ function processEvents(events: Array<EventObjectType>): void {
  }
 }

-export function processEventQueue(): void {
+function processEventQueue(): void {
  const {events, eventPriority} = ((currentEventQueue: any): EventQueue);

  if (events.length === 0) {
@@ -622,8 +626,8 @@ export function processEventQueue(): void {
  }
 }

-function getTargetEventTypesSet(
-  eventTypes: Array<ReactEventResponderEventType>,
+function getDOMTargetEventTypesSet(
+  eventTypes: Array<ReactDOMEventResponderEventType>,
 ): Set<string> {
  let cachedSet = targetEventTypeCached.get(eventTypes);

@@ -669,7 +673,7 @@ function getTargetEventResponderInstances(
      const targetEventTypes = responder.targetEventTypes;
      // Validate the target event type exists on the responder
      if (targetEventTypes !== undefined) {
-        const targetEventTypesSet = getTargetEventTypesSet(targetEventTypes);
+        const targetEventTypesSet = getDOMTargetEventTypesSet(targetEventTypes);
        if (targetEventTypesSet.has(listeningName)) {
          eventResponderInstances.push(eventComponentInstance);
        }
@@ -700,8 +704,8 @@ function getRootEventResponderInstances(

 function shouldSkipEventComponent(
  eventResponderInstance: ReactEventComponentInstance,
-  responder: ReactEventResponder,
-  propagatedEventResponders: null | Set<ReactEventResponder>,
+  responder: ReactDOMEventResponder,
+  propagatedEventResponders: null | Set<ReactDOMEventResponder>,
 ): boolean {
  if (propagatedEventResponders !== null) {
    if (propagatedEventResponders.has(responder)) {
@@ -716,9 +720,9 @@ function shouldSkipEventComponent(
 }

 function checkForLocalPropagationContinuation(
-  responder: ReactEventResponder,
-  propagatedEventResponders: Set<ReactEventResponder>,
-) {
+  responder: ReactDOMEventResponder,
+  propagatedEventResponders: Set<ReactDOMEventResponder>,
+): void {
  if (continueLocalPropagation === true) {
    propagatedEventResponders.delete(responder);
    continueLocalPropagation = false;
@@ -748,14 +752,14 @@ function traverseAndHandleEventResponderInstances(
    listeningName,
    targetFiber,
  );
-  const responderEvent = createResponderEvent(
+  const responderEvent = createDOMResponderEvent(
    ((topLevelType: any): string),
    nativeEvent,
    ((nativeEventTarget: any): Element | Document),
    isPassiveEvent,
    isPassiveSupported,
  );
-  const propagatedEventResponders: Set<ReactEventResponder> = new Set();
+  const propagatedEventResponders: Set<ReactDOMEventResponder> = new Set();
  let length = targetEventResponderInstances.length;
  let i;

@@ -964,7 +968,7 @@ export function dispatchEventForResponderEventSystem(

 export function addRootEventTypesForComponentInstance(
  eventComponentInstance: ReactEventComponentInstance,
-  rootEventTypes: Array<ReactEventResponderEventType>,
+  rootEventTypes: Array<ReactDOMEventResponderEventType>,
 ): void {
  for (let i = 0; i < rootEventTypes.length; i++) {
    const rootEventType = rootEventTypes[i];
@@ -973,7 +977,7 @@ export function addRootEventTypesForComponentInstance(
 }

 function registerRootEventType(
-  rootEventType: ReactEventResponderEventType,
+  rootEventType: ReactDOMEventResponderEventType,
  eventComponentInstance: ReactEventComponentInstance,
 ): void {
  let name = rootEventType;
@@ -1013,9 +1017,7 @@ function registerRootEventType(
    name,
  );
  rootEventTypesSet.add(listeningName);
-  rootEventComponentInstances.add(
-    ((eventComponentInstance: any): ReactEventComponentInstance),
-  );
+  rootEventComponentInstances.add(eventComponentInstance);
 }

 export function generateListeningKey(
--- a/packages/react-events/src/Drag.js
+++ b/packages/react-events/src/Drag.js
@@ -8,12 +8,12 @@
 */

 import type {
-  ReactResponderEvent,
-  ReactResponderContext,
-  EventPriority,
-} from 'shared/ReactTypes';
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+} from 'shared/ReactDOMTypes';
+import type {EventPriority} from 'shared/ReactTypes';

-import React from 'react';
+import ReactDOM from 'react-dom';
 import {DiscreteEvent, UserBlockingEvent} from 'shared/ReactTypes';

 const targetEventTypes = ['pointerdown'];
@@ -58,7 +58,7 @@ type DragEvent = {|
 |};

 function createDragEvent(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  type: DragEventType,
  target: Element | Document,
  eventData?: EventData,
@@ -72,7 +72,7 @@ function createDragEvent(
 }

 function dispatchDragEvent(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  name: DragEventType,
  listener: DragEvent => void,
  state: DragState,
@@ -99,8 +99,8 @@ const DragResponder = {
  },
  allowMultipleHostChildren: false,
  onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: Object,
    state: DragState,
  ): void {
@@ -142,8 +142,8 @@ const DragResponder = {
    }
  },
  onRootEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: Object,
    state: DragState,
  ): void {
@@ -259,4 +259,4 @@ const DragResponder = {
  },
 };

-export default React.unstable_createEventComponent(DragResponder, 'Drag');
+export default ReactDOM.unstable_createEventComponent(DragResponder, 'Drag');
--- a/packages/react-events/src/Focus.js
+++ b/packages/react-events/src/Focus.js
@@ -8,12 +8,12 @@
 */

 import type {
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
  PointerType,
-  ReactResponderEvent,
-  ReactResponderContext,
-} from 'shared/ReactTypes';
+} from 'shared/ReactDOMTypes';

-import React from 'react';
+import ReactDOM from 'react-dom';
 import {DiscreteEvent} from 'shared/ReactTypes';

 type FocusProps = {
@@ -71,7 +71,7 @@ if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
 }

 function createFocusEvent(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  type: FocusEventType,
  target: Element | Document,
  pointerType: PointerType,
@@ -85,7 +85,7 @@ function createFocusEvent(
 }

 function dispatchFocusInEvents(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  props: FocusProps,
  state: FocusState,
 ) {
@@ -127,7 +127,7 @@ function dispatchFocusInEvents(
 }

 function dispatchFocusOutEvents(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  props: FocusProps,
  state: FocusState,
 ) {
@@ -158,7 +158,7 @@ function dispatchFocusOutEvents(
 }

 function dispatchFocusVisibleOutEvent(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  props: FocusProps,
  state: FocusState,
 ) {
@@ -180,7 +180,7 @@ function dispatchFocusVisibleOutEvent(
 }

 function unmountResponder(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  props: FocusProps,
  state: FocusState,
 ): void {
@@ -190,8 +190,8 @@ function unmountResponder(
 }

 function handleRootPointerEvent(
-  event: ReactResponderEvent,
-  context: ReactResponderContext,
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  props: FocusProps,
  state: FocusState,
 ): void {
@@ -229,8 +229,8 @@ const FocusResponder = {
  },
  allowMultipleHostChildren: false,
  onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: FocusProps,
    state: FocusState,
  ): void {
@@ -270,8 +270,8 @@ const FocusResponder = {
    }
  },
  onRootEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: FocusProps,
    state: FocusState,
  ): void {
@@ -321,14 +321,14 @@ const FocusResponder = {
    }
  },
  onUnmount(
-    context: ReactResponderContext,
+    context: ReactDOMResponderContext,
    props: FocusProps,
    state: FocusState,
  ) {
    unmountResponder(context, props, state);
  },
  onOwnershipChange(
-    context: ReactResponderContext,
+    context: ReactDOMResponderContext,
    props: FocusProps,
    state: FocusState,
  ) {
@@ -336,4 +336,4 @@ const FocusResponder = {
  },
 };

-export default React.unstable_createEventComponent(FocusResponder, 'Focus');
+export default ReactDOM.unstable_createEventComponent(FocusResponder, 'Focus');
--- a/packages/react-events/src/FocusScope.js
+++ b/packages/react-events/src/FocusScope.js
@@ -7,10 +7,11 @@
 * @flow
 */
 import type {
-  ReactResponderEvent,
-  ReactResponderContext,
-} from 'shared/ReactTypes';
-import React from 'react';
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+} from 'shared/ReactDOMTypes';
+
+import ReactDOM from 'react-dom';

 type FocusScopeProps = {
  autoFocus: Boolean,
@@ -35,7 +36,7 @@ function focusElement(element: ?HTMLElement) {
 }

 function getFirstFocusableElement(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  state: FocusScopeState,
 ): ?HTMLElement {
  const elements = context.getFocusableElementsInScope();
@@ -55,8 +56,8 @@ const FocusScopeResponder = {
  },
  allowMultipleHostChildren: true,
  onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: FocusScopeProps,
    state: FocusScopeState,
  ) {
@@ -112,8 +113,8 @@ const FocusScopeResponder = {
    }
  },
  onRootEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: FocusScopeProps,
    state: FocusScopeState,
  ) {
@@ -133,7 +134,7 @@ const FocusScopeResponder = {
    }
  },
  onMount(
-    context: ReactResponderContext,
+    context: ReactDOMResponderContext,
    props: FocusScopeProps,
    state: FocusScopeState,
  ): void {
@@ -146,7 +147,7 @@ const FocusScopeResponder = {
    }
  },
  onUnmount(
-    context: ReactResponderContext,
+    context: ReactDOMResponderContext,
    props: FocusScopeProps,
    state: FocusScopeState,
  ): void {
@@ -156,7 +157,7 @@ const FocusScopeResponder = {
  },
 };

-export default React.unstable_createEventComponent(
+export default ReactDOM.unstable_createEventComponent(
  FocusScopeResponder,
  'FocusScope',
 );
--- a/packages/react-events/src/Hover.js
+++ b/packages/react-events/src/Hover.js
@@ -8,11 +8,11 @@
 */

 import type {
-  ReactResponderEvent,
-  ReactResponderContext,
-} from 'shared/ReactTypes';
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+} from 'shared/ReactDOMTypes';

-import React from 'react';
+import ReactDOM from 'react-dom';
 import {UserBlockingEvent} from 'shared/ReactTypes';

 type HoverProps = {
@@ -69,8 +69,8 @@ if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
 }

 function createHoverEvent(
-  event: ?ReactResponderEvent,
-  context: ReactResponderContext,
+  event: ?ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  type: HoverEventType,
  target: Element | Document,
 ): HoverEvent {
@@ -102,8 +102,8 @@ function createHoverEvent(
 }

 function dispatchHoverChangeEvent(
-  event: null | ReactResponderEvent,
-  context: ReactResponderContext,
+  event: null | ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  props: HoverProps,
  state: HoverState,
 ): void {
@@ -121,8 +121,8 @@ function dispatchHoverChangeEvent(
 }

 function dispatchHoverStartEvents(
-  event: ReactResponderEvent,
-  context: ReactResponderContext,
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  props: HoverProps,
  state: HoverState,
 ): void {
@@ -184,8 +184,8 @@ function dispatchHoverStartEvents(
 }

 function dispatchHoverEndEvents(
-  event: null | ReactResponderEvent,
-  context: ReactResponderContext,
+  event: null | ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  props: HoverProps,
  state: HoverState,
 ) {
@@ -256,7 +256,7 @@ function calculateDelayMS(delay: ?number, min = 0, fallback = 0) {
 }

 function unmountResponder(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  props: HoverProps,
  state: HoverState,
 ): void {
@@ -288,8 +288,8 @@ const HoverResponder = {
  },
  allowMultipleHostChildren: false,
  onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: HoverProps,
    state: HoverState,
  ): void {
@@ -391,14 +391,14 @@ const HoverResponder = {
    }
  },
  onUnmount(
-    context: ReactResponderContext,
+    context: ReactDOMResponderContext,
    props: HoverProps,
    state: HoverState,
  ) {
    unmountResponder(context, props, state);
  },
  onOwnershipChange(
-    context: ReactResponderContext,
+    context: ReactDOMResponderContext,
    props: HoverProps,
    state: HoverState,
  ) {
@@ -406,4 +406,4 @@ const HoverResponder = {
  },
 };

-export default React.unstable_createEventComponent(HoverResponder, 'Hover');
+export default ReactDOM.unstable_createEventComponent(HoverResponder, 'Hover');
--- a/packages/react-events/src/Press.js
+++ b/packages/react-events/src/Press.js
@@ -8,13 +8,13 @@
 */

 import type {
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
  PointerType,
-  ReactResponderEvent,
-  ReactResponderContext,
-} from 'shared/ReactTypes';
+} from 'shared/ReactDOMTypes';
 import type {EventPriority} from 'shared/ReactTypes';

-import React from 'react';
+import ReactDOM from 'react-dom';
 import {DiscreteEvent, UserBlockingEvent} from 'shared/ReactTypes';

 type PressProps = {
@@ -150,11 +150,11 @@ if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
 }

 function createPressEvent(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  type: PressEventType,
  target: Element | Document,
  pointerType: PointerType,
-  event: ?ReactResponderEvent,
+  event: ?ReactDOMResponderEvent,
 ): PressEvent {
  const timeStamp = context.getTimeStamp();
  let clientX = null;
@@ -204,8 +204,8 @@ function createPressEvent(
 }

 function dispatchEvent(
-  event: ?ReactResponderEvent,
-  context: ReactResponderContext,
+  event: ?ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  state: PressState,
  name: PressEventType,
  listener: (e: Object) => void,
@@ -224,8 +224,8 @@ function dispatchEvent(
 }

 function dispatchPressChangeEvent(
-  event: ?ReactResponderEvent,
-  context: ReactResponderContext,
+  event: ?ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  props: PressProps,
  state: PressState,
 ): void {
@@ -237,8 +237,8 @@ function dispatchPressChangeEvent(
 }

 function dispatchLongPressChangeEvent(
-  event: ?ReactResponderEvent,
-  context: ReactResponderContext,
+  event: ?ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  props: PressProps,
  state: PressState,
 ): void {
@@ -256,7 +256,7 @@ function dispatchLongPressChangeEvent(
  );
 }

-function activate(event: ReactResponderEvent, context, props, state) {
+function activate(event: ReactDOMResponderEvent, context, props, state) {
  const nativeEvent: any = event.nativeEvent;
  const {x, y} = getEventViewportCoords(nativeEvent);
  const wasActivePressed = state.isActivePressed;
@@ -280,7 +280,7 @@ function activate(event: ReactResponderEvent, context, props, state) {
  }
 }

-function deactivate(event: ?ReactResponderEvent, context, props, state) {
+function deactivate(event: ?ReactDOMResponderEvent, context, props, state) {
  const wasLongPressed = state.isLongPressed;
  state.isActivePressed = false;
  state.isLongPressed = false;
@@ -304,8 +304,8 @@ function deactivate(event: ?ReactResponderEvent, context, props, state) {
 }

 function dispatchPressStartEvents(
-  event: ReactResponderEvent,
-  context: ReactResponderContext,
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  props: PressProps,
  state: PressState,
 ): void {
@@ -367,8 +367,8 @@ function dispatchPressStartEvents(
 }

 function dispatchPressEndEvents(
-  event: ?ReactResponderEvent,
-  context: ReactResponderContext,
+  event: ?ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  props: PressProps,
  state: PressState,
 ): void {
@@ -415,8 +415,8 @@ function dispatchPressEndEvents(
 }

 function dispatchCancel(
-  event: ReactResponderEvent,
-  context: ReactResponderContext,
+  event: ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  props: PressProps,
  state: PressState,
 ): void {
@@ -447,7 +447,7 @@ function calculateDelayMS(delay: ?number, min = 0, fallback = 0) {

 // TODO: account for touch hit slop
 function calculateResponderRegion(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  target: Element,
  props: PressProps,
 ) {
@@ -512,7 +512,7 @@ function getEventViewportCoords(
 }

 function unmountResponder(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  props: PressProps,
  state: PressState,
 ): void {
@@ -523,7 +523,7 @@ function unmountResponder(
 }

 function addRootEventTypes(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  state: PressState,
 ): void {
  if (!state.addedRootEvents) {
@@ -533,7 +533,7 @@ function addRootEventTypes(
 }

 function removeRootEventTypes(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  state: PressState,
 ): void {
  if (state.addedRootEvents) {
@@ -556,7 +556,7 @@ function getTouchById(
  return null;
 }

-function getTouchTarget(context: ReactResponderContext, touchEvent: Touch) {
+function getTouchTarget(context: ReactDOMResponderContext, touchEvent: Touch) {
  const doc = context.getActiveDocument();
  return doc.elementFromPoint(touchEvent.clientX, touchEvent.clientY);
 }
@@ -564,7 +564,7 @@ function getTouchTarget(context: ReactResponderContext, touchEvent: Touch) {
 function updateIsPressWithinResponderRegion(
  target: Element | Document,
  nativeEventOrTouchEvent: Event | Touch,
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  props: PressProps,
  state: PressState,
 ): void {
@@ -635,8 +635,8 @@ const PressResponder = {
  },
  allowMultipleHostChildren: false,
  onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: PressProps,
    state: PressState,
  ): void {
@@ -760,8 +760,8 @@ const PressResponder = {
    }
  },
  onRootEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: PressProps,
    state: PressState,
  ): void {
@@ -941,14 +941,14 @@ const PressResponder = {
    }
  },
  onUnmount(
-    context: ReactResponderContext,
+    context: ReactDOMResponderContext,
    props: PressProps,
    state: PressState,
  ) {
    unmountResponder(context, props, state);
  },
  onOwnershipChange(
-    context: ReactResponderContext,
+    context: ReactDOMResponderContext,
    props: PressProps,
    state: PressState,
  ) {
@@ -956,4 +956,4 @@ const PressResponder = {
  },
 };

-export default React.unstable_createEventComponent(PressResponder, 'Press');
+export default ReactDOM.unstable_createEventComponent(PressResponder, 'Press');
--- a/packages/react-events/src/Scroll.js
+++ b/packages/react-events/src/Scroll.js
@@ -8,14 +8,14 @@
 */

 import type {
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
  PointerType,
-  ReactResponderEvent,
-  ReactResponderContext,
-} from 'shared/ReactTypes';
+} from 'shared/ReactDOMTypes';
 import {UserBlockingEvent} from 'shared/ReactTypes';
 import type {EventPriority} from 'shared/ReactTypes';

-import React from 'react';
+import ReactDOM from 'react-dom';

 type ScrollProps = {
  disabled: boolean,
@@ -61,8 +61,8 @@ const targetEventTypes = ['scroll', 'pointerdown', 'keyup'];
 const rootEventTypes = ['pointermove', 'pointerup', 'pointercancel'];

 function createScrollEvent(
-  event: ?ReactResponderEvent,
-  context: ReactResponderContext,
+  event: ?ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  type: ScrollEventType,
  target: Element | Document,
  pointerType: PointerType,
@@ -97,8 +97,8 @@ function createScrollEvent(
 }

 function dispatchEvent(
-  event: ?ReactResponderEvent,
-  context: ReactResponderContext,
+  event: ?ReactDOMResponderEvent,
+  context: ReactDOMResponderContext,
  state: ScrollState,
  name: ScrollEventType,
  listener: (e: Object) => void,
@@ -127,8 +127,8 @@ const ScrollResponder = {
  },
  allowMultipleHostChildren: true,
  onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: ScrollProps,
    state: ScrollState,
  ): void {
@@ -173,8 +173,8 @@ const ScrollResponder = {
    }
  },
  onRootEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: ScrollProps,
    state: ScrollState,
  ) {
@@ -196,14 +196,14 @@ const ScrollResponder = {
    }
  },
  onUnmount(
-    context: ReactResponderContext,
+    context: ReactDOMResponderContext,
    props: ScrollProps,
    state: ScrollState,
  ) {
    // TODO
  },
  onOwnershipChange(
-    context: ReactResponderContext,
+    context: ReactDOMResponderContext,
    props: ScrollProps,
    state: ScrollState,
  ) {
@@ -211,4 +211,7 @@ const ScrollResponder = {
  },
 };

-export default React.unstable_createEventComponent(ScrollResponder, 'Scroll');
+export default ReactDOM.unstable_createEventComponent(
+  ScrollResponder,
+  'Scroll',
+);
--- a/packages/react-events/src/Swipe.js
+++ b/packages/react-events/src/Swipe.js
@@ -8,12 +8,12 @@
 */

 import type {
-  ReactResponderEvent,
-  ReactResponderContext,
-} from 'shared/ReactTypes';
+  ReactDOMResponderEvent,
+  ReactDOMResponderContext,
+} from 'shared/ReactDOMTypes';
 import type {EventPriority} from 'shared/ReactTypes';

-import React from 'react';
+import ReactDOM from 'react-dom';
 import {UserBlockingEvent, DiscreteEvent} from 'shared/ReactTypes';

 const targetEventTypes = ['pointerdown'];
@@ -48,7 +48,7 @@ type SwipeEvent = {|
 |};

 function createSwipeEvent(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  type: SwipeEventType,
  target: Element | Document,
  eventData?: EventData,
@@ -64,7 +64,7 @@ function createSwipeEvent(
 }

 function dispatchSwipeEvent(
-  context: ReactResponderContext,
+  context: ReactDOMResponderContext,
  name: SwipeEventType,
  listener: SwipeEvent => void,
  state: SwipeState,
@@ -105,8 +105,8 @@ const SwipeResponder = {
  },
  allowMultipleHostChildren: false,
  onEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: Object,
    state: SwipeState,
  ): void {
@@ -147,8 +147,8 @@ const SwipeResponder = {
    }
  },
  onRootEvent(
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
    props: Object,
    state: SwipeState,
  ): void {
@@ -262,4 +262,4 @@ const SwipeResponder = {
  },
 };

-export default React.unstable_createEventComponent(SwipeResponder, 'Swipe');
+export default ReactDOM.unstable_createEventComponent(SwipeResponder, 'Swipe');
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -76,6 +76,7 @@ export type UpdatePayload = Object;

 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
+export type EventResponder = any;

 // TODO: Remove this conditional once all changes have propagated.
 if (registerEventHandler) {
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -48,6 +48,7 @@ export type ChildSet = void; // Unused

 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
+export type EventResponder = any;

 const UPDATE_SIGNAL = {};
 if (__DEV__) {
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -37,6 +37,7 @@ export opaque type UpdatePayload = mixed; // eslint-disable-line no-undef
 export opaque type ChildSet = mixed; // eslint-disable-line no-undef
 export opaque type TimeoutHandle = mixed; // eslint-disable-line no-undef
 export opaque type NoTimeout = mixed; // eslint-disable-line no-undef
+export type EventResponder = any;

 export const getPublicInstance = $$$hostConfig.getPublicInstance;
 export const getRootHostContext = $$$hostConfig.getRootHostContext;
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -53,6 +53,7 @@ export type UpdatePayload = Object;
 export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
+export type EventResponder = any;

 export * from 'shared/HostConfigWithNoPersistence';
 export * from 'shared/HostConfigWithNoHydration';
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -14,7 +14,6 @@ import {
 } from 'shared/ReactSymbols';

 import {Component, PureComponent} from './ReactBaseClasses';
-import {createEventComponent} from './ReactCreateEventComponent';
 import {createRef} from './ReactCreateRef';
 import {forEach, map, count, toArray, only} from './ReactChildren';
 import {
@@ -51,7 +50,7 @@ import {
 } from './ReactElementValidator';
 import ReactSharedInternals from './ReactSharedInternals';
 import {error, warn} from './withComponentStack';
-import {enableEventAPI, enableJSXTransformAPI} from 'shared/ReactFeatureFlags';
+import {enableJSXTransformAPI} from 'shared/ReactFeatureFlags';
 const React = {
  Children: {
    map,
@@ -106,10 +105,6 @@ const React = {
 // don't modify the React object to avoid deopts.
 // Also let's not expose their names in stable builds.

-if (enableEventAPI) {
-  React.unstable_createEventComponent = createEventComponent;
-}
-
 if (enableJSXTransformAPI) {
  if (__DEV__) {
    React.jsxDEV = jsxWithValidation;
--- a/packages/shared/ReactDOMTypes.js
+++ b/packages/shared/ReactDOMTypes.js
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {EventPriority} from 'shared/ReactTypes';
+
+type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | Touch;
+
+export type ReactDOMEventResponderEventType =
+  | string
+  | {name: string, passive?: boolean};
+
+export type PointerType =
+  | ''
+  | 'mouse'
+  | 'keyboard'
+  | 'pen'
+  | 'touch'
+  | 'trackpad';
+
+export type ReactDOMResponderEvent = {
+  nativeEvent: AnyNativeEvent,
+  passive: boolean,
+  passiveSupported: boolean,
+  pointerId: null | number,
+  pointerType: PointerType,
+  target: Element | Document,
+  type: string,
+};
+
+export type ReactDOMEventResponder = {
+  targetEventTypes?: Array<ReactDOMEventResponderEventType>,
+  rootEventTypes?: Array<ReactDOMEventResponderEventType>,
+  createInitialState?: (props: null | Object) => Object,
+  allowMultipleHostChildren: boolean,
+  stopLocalPropagation: boolean,
+  onEvent?: (
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: null | Object,
+    state: null | Object,
+  ) => void,
+  onEventCapture?: (
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: null | Object,
+    state: null | Object,
+  ) => void,
+  onRootEvent?: (
+    event: ReactDOMResponderEvent,
+    context: ReactDOMResponderContext,
+    props: null | Object,
+    state: null | Object,
+  ) => void,
+  onMount?: (
+    context: ReactDOMResponderContext,
+    props: null | Object,
+    state: null | Object,
+  ) => void,
+  onUnmount?: (
+    context: ReactDOMResponderContext,
+    props: null | Object,
+    state: null | Object,
+  ) => void,
+  onOwnershipChange?: (
+    context: ReactDOMResponderContext,
+    props: null | Object,
+    state: null | Object,
+  ) => void,
+};
+
+export type ReactDOMResponderContext = {
+  dispatchEvent: (
+    eventObject: Object,
+    listener: (Object) => void,
+    eventPriority: EventPriority,
+  ) => void,
+  isTargetWithinElement: (
+    childTarget: Element | Document,
+    parentTarget: Element | Document,
+  ) => boolean,
+  isTargetWithinEventComponent: (Element | Document) => boolean,
+  isTargetWithinEventResponderScope: (Element | Document) => boolean,
+  isEventWithinTouchHitTarget: (event: ReactDOMResponderEvent) => boolean,
+  addRootEventTypes: (
+    rootEventTypes: Array<ReactDOMEventResponderEventType>,
+  ) => void,
+  removeRootEventTypes: (
+    rootEventTypes: Array<ReactDOMEventResponderEventType>,
+  ) => void,
+  hasOwnership: () => boolean,
+  requestGlobalOwnership: () => boolean,
+  releaseOwnership: () => boolean,
+  setTimeout: (func: () => void, timeout: number) => number,
+  clearTimeout: (timerId: number) => void,
+  getFocusableElementsInScope(): Array<HTMLElement>,
+  getActiveDocument(): Document,
+  objectAssign: Function,
+  getEventCurrentTarget(event: ReactDOMResponderEvent): Element,
+  getTimeStamp: () => number,
+  isTargetWithinHostComponent: (
+    target: Element | Document,
+    elementType: string,
+    deep: boolean,
+  ) => boolean,
+  continueLocalPropagation(): void,
+};
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -7,6 +7,8 @@
 * @flow
 */

+import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';
+
 export type ReactNode =
  | React$Element<any>
  | ReactPortal
@@ -81,54 +83,10 @@ export type RefObject = {|
  current: any,
 |};

-export type ReactEventResponderEventType =
-  | string
-  | {name: string, passive?: boolean};
-
-export type ReactEventResponder = {
-  targetEventTypes?: Array<ReactEventResponderEventType>,
-  rootEventTypes?: Array<ReactEventResponderEventType>,
-  createInitialState?: (props: null | Object) => Object,
-  allowMultipleHostChildren: boolean,
-  onEvent?: (
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onEventCapture?: (
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onRootEvent?: (
-    event: ReactResponderEvent,
-    context: ReactResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onMount?: (
-    context: ReactResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onUnmount?: (
-    context: ReactResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-  onOwnershipChange?: (
-    context: ReactResponderContext,
-    props: null | Object,
-    state: null | Object,
-  ) => void,
-};
-
 export type ReactEventComponentInstance = {|
  currentFiber: mixed,
  props: null | Object,
-  responder: ReactEventResponder,
+  responder: EventResponder,
  rootEventTypes: null | Set<string>,
  rootInstance: mixed,
  state: null | Object,
@@ -138,7 +96,7 @@ export type ReactEventComponent = {|
  $$typeof: Symbol | number,
  displayName: string,
  props: null | Object,
-  responder: ReactEventResponder,
+  responder: EventResponder,
 |};

 export type ReactEventTarget = {|
@@ -147,65 +105,8 @@ export type ReactEventTarget = {|
  type: Symbol | number,
 |};

-type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | Touch;
-
-export type PointerType =
-  | ''
-  | 'mouse'
-  | 'keyboard'
-  | 'pen'
-  | 'touch'
-  | 'trackpad';
-
-export type ReactResponderEvent = {
-  nativeEvent: AnyNativeEvent,
-  passive: boolean,
-  passiveSupported: boolean,
-  pointerId: null | number,
-  pointerType: PointerType,
-  target: Element | Document,
-  type: string,
-};
-
 export opaque type EventPriority = 0 | 1 | 2;

 export const DiscreteEvent: EventPriority = 0;
 export const UserBlockingEvent: EventPriority = 1;
 export const ContinuousEvent: EventPriority = 2;
-
-export type ReactResponderContext = {
-  dispatchEvent: (
-    eventObject: Object,
-    listener: (Object) => void,
-    eventPriority: EventPriority,
-  ) => void,
-  isTargetWithinElement: (
-    childTarget: Element | Document,
-    parentTarget: Element | Document,
-  ) => boolean,
-  isTargetWithinEventComponent: (Element | Document) => boolean,
-  isTargetWithinEventResponderScope: (Element | Document) => boolean,
-  isEventWithinTouchHitTarget: (event: ReactResponderEvent) => boolean,
-  addRootEventTypes: (
-    rootEventTypes: Array<ReactEventResponderEventType>,
-  ) => void,
-  removeRootEventTypes: (
-    rootEventTypes: Array<ReactEventResponderEventType>,
-  ) => void,
-  hasOwnership: () => boolean,
-  requestGlobalOwnership: () => boolean,
-  releaseOwnership: () => boolean,
-  setTimeout: (func: () => void, timeout: number) => number,
-  clearTimeout: (timerId: number) => void,
-  getFocusableElementsInScope(): Array<HTMLElement>,
-  getActiveDocument(): Document,
-  objectAssign: Function,
-  getEventCurrentTarget(event: ReactResponderEvent): Element,
-  getTimeStamp: () => number,
-  isTargetWithinHostComponent: (
-    target: Element | Document,
-    elementType: string,
-    deep: boolean,
-  ) => boolean,
-  continueLocalPropagation(): void,
-};
--- a/packages/react/src/ReactCreateEventComponent.js
+++ b/packages/react/src/ReactCreateEventComponent.js
@@ -6,9 +6,8 @@
 * @flow
 */

-import type {ReactEventComponent, ReactEventResponder} from 'shared/ReactTypes';
-import {enableEventAPI} from 'shared/ReactFeatureFlags';
-
+import type {EventResponder} from 'react-reconciler/src/ReactFiberHostConfig';
+import type {ReactEventComponent} from 'shared/ReactTypes';
 import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';

 let hasBadMapPolyfill;
@@ -30,26 +29,24 @@ if (__DEV__) {
  }
 }

-export function createEventComponent(
-  responder: ReactEventResponder,
+export default function createEventComponent(
+  responder: EventResponder,
  displayName: string,
-): ?ReactEventComponent {
-  if (enableEventAPI) {
-    // We use responder as a Map key later on. When we have a bad
-    // polyfill, then we can't use it as a key as the polyfill tries
-    // to add a property to the object.
-    if (__DEV__ && !hasBadMapPolyfill) {
-      Object.freeze(responder);
-    }
-    const eventComponent = {
-      $$typeof: REACT_EVENT_COMPONENT_TYPE,
-      displayName: displayName,
-      props: null,
-      responder: responder,
-    };
-    if (__DEV__) {
-      Object.freeze(eventComponent);
-    }
-    return eventComponent;
+): ReactEventComponent {
+  // We use responder as a Map key later on. When we have a bad
+  // polyfill, then we can't use it as a key as the polyfill tries
+  // to add a property to the object.
+  if (__DEV__ && !hasBadMapPolyfill) {
+    Object.freeze(responder);
  }
+  const eventComponent = {
+    $$typeof: REACT_EVENT_COMPONENT_TYPE,
+    displayName: displayName,
+    props: null,
+    responder: responder,
+  };
+  if (__DEV__) {
+    Object.freeze(eventComponent);
+  }
+  return eventComponent;
 }
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -465,7 +465,7 @@ const bundles = [
    moduleType: NON_FIBER_RENDERER,
    entry: 'react-events/press',
    global: 'ReactEventsPress',
-    externals: ['react'],
+    externals: ['react-dom'],
  },

  {
@@ -480,7 +480,7 @@ const bundles = [
    moduleType: NON_FIBER_RENDERER,
    entry: 'react-events/hover',
    global: 'ReactEventsHover',
-    externals: ['react'],
+    externals: ['react-dom'],
  },

  {
@@ -495,7 +495,7 @@ const bundles = [
    moduleType: NON_FIBER_RENDERER,
    entry: 'react-events/focus',
    global: 'ReactEventsFocus',
-    externals: ['react'],
+    externals: ['react-dom'],
  },

  {
@@ -510,7 +510,7 @@ const bundles = [
    moduleType: NON_FIBER_RENDERER,
    entry: 'react-events/focus-scope',
    global: 'ReactEventsFocusScope',
-    externals: ['react'],
+    externals: ['react-dom'],
  },

  {
@@ -525,7 +525,7 @@ const bundles = [
    moduleType: NON_FIBER_RENDERER,
    entry: 'react-events/swipe',
    global: 'ReactEventsSwipe',
-    externals: ['react'],
+    externals: ['react-dom'],
  },

  {
@@ -540,7 +540,7 @@ const bundles = [
    moduleType: NON_FIBER_RENDERER,
    entry: 'react-events/drag',
    global: 'ReactEventsDrag',
-    externals: ['react'],
+    externals: ['react-dom'],
  },

  {
@@ -555,7 +555,7 @@ const bundles = [
    moduleType: NON_FIBER_RENDERER,
    entry: 'react-events/scroll',
    global: 'ReactEventsScroll',
-    externals: ['react'],
+    externals: ['react-dom'],
  },
 ];