DevTools bugfix: Ignore duplicate welcome "message" events (#24186)

packages/react-devtools-extensions/src/backend.js

@@ -6,6 +6,8 @@
 
 'use strict';
 
+let welcomeHasInitialized = false;
+
 function welcome(event) {
   if (
     event.source !== window ||
@@ -14,6 +16,25 @@ function welcome(event) {
     return;
   }
 
+  // In some circumstances, this method is called more than once for a single welcome message.
+  // The exact circumstances of this are unclear, though it seems related to 3rd party event batching code.
+  //
+  // Regardless, call this method multiple times can cause DevTools to add duplicate elements to the Store
+  // (and throw an error) or worse yet, choke up entirely and freeze the browser.
+  //
+  // The simplest solution is to ignore the duplicate events.
+  // To be clear, this SHOULD NOT BE NECESSARY, since we remove the event handler below.
+  //
+  // See https://github.com/facebook/react/issues/24162
+  if (welcomeHasInitialized) {
+    console.warn(
+      'React DevTools detected duplicate welcome "message" events from the content script.',
+    );
+    return;
+  }
+
+  welcomeHasInitialized = true;
+
   window.removeEventListener('message', welcome);
 
   setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);

packages/react-devtools-extensions/src/contentScript.js

@@ -25,15 +25,15 @@ function handleMessageFromDevtools(message) {
   );
 }
 
-function handleMessageFromPage(evt) {
+function handleMessageFromPage(event) {
   if (
-    evt.source === window &&
-    evt.data &&
-    evt.data.source === 'react-devtools-bridge'
+    event.source === window &&
+    event.data &&
+    event.data.source === 'react-devtools-bridge'
   ) {
     backendInitialized = true;
 
-    port.postMessage(evt.data.payload);
+    port.postMessage(event.data.payload);
   }
 }