From 4841373719597e05355c26e37b435dc894fcf076 Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <hoxy@meta.com>
Date: Thu, 28 Mar 2024 10:06:53 -0700
Subject: [PATCH] fix: defer ReactDevToolsOverlay import (#43690)

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

# Changelog: [Internal]

Fixes https://github.com/facebook/react-native/issues/43678.

The issue is that once `getInspectorDataForViewAtPoint` is imported, it should throw if RDT global hook was not injected. ReactDevTools overlay imports `getInspectorDataForViewAtPoint`, this is why it did throw in testing environment.

ReactDevToolsOverlay JSX-element is already gated with RDT global hook check, adding a deferred import, same as it was already implemented for Inspector.

Still unclear to me how this didn't throw all this time while using the Catalyst / RNTester.

Reviewed By: cortinico

Differential Revision: D55474774

fbshipit-source-id: 759e5e8227cc7534193e5b95616b6099c15f5cb5
---
 .../Libraries/ReactNative/AppContainer-dev.js | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/react-native/Libraries/ReactNative/AppContainer-dev.js b/packages/react-native/Libraries/ReactNative/AppContainer-dev.js
index 05c97b5d44de1a..cba0ccb2395dce 100644
--- a/packages/react-native/Libraries/ReactNative/AppContainer-dev.js
+++ b/packages/react-native/Libraries/ReactNative/AppContainer-dev.js
@@ -20,7 +20,6 @@ import View from '../Components/View/View';
 import DebuggingOverlay from '../Debugging/DebuggingOverlay';
 import useSubscribeToDebuggingOverlayRegistry from '../Debugging/useSubscribeToDebuggingOverlayRegistry';
 import RCTDeviceEventEmitter from '../EventEmitter/RCTDeviceEventEmitter';
-import ReactDevToolsOverlay from '../Inspector/ReactDevToolsOverlay';
 import LogBoxNotificationContainer from '../LogBox/LogBoxNotificationContainer';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import {RootTagContext, createRootTag} from './RootTag';
@@ -64,6 +63,26 @@ const InspectorDeferred = ({
   );
 };
 
+type ReactDevToolsOverlayDeferredProps = {
+  inspectedViewRef: InspectedViewRef,
+  reactDevToolsAgent: ReactDevToolsAgent,
+};
+
+const ReactDevToolsOverlayDeferred = ({
+  inspectedViewRef,
+  reactDevToolsAgent,
+}: ReactDevToolsOverlayDeferredProps) => {
+  const ReactDevToolsOverlay =
+    require('../Inspector/ReactDevToolsOverlay').default;
+
+  return (
+    <ReactDevToolsOverlay
+      inspectedViewRef={inspectedViewRef}
+      reactDevToolsAgent={reactDevToolsAgent}
+    />
+  );
+};
+
 const AppContainer = ({
   children,
   fabric,
@@ -155,7 +174,7 @@ const AppContainer = ({
         <DebuggingOverlay ref={debuggingOverlayRef} />
 
         {reactDevToolsAgent != null && (
-          <ReactDevToolsOverlay
+          <ReactDevToolsOverlayDeferred
             inspectedViewRef={innerViewRef}
             reactDevToolsAgent={reactDevToolsAgent}
           />