diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js index a102bed3a90a3..ad55ed6d50fdc 100644 --- a/packages/react-devtools-extensions/src/backend.js +++ b/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__); diff --git a/packages/react-devtools-extensions/src/contentScript.js b/packages/react-devtools-extensions/src/contentScript.js index c914c6e7b3dfc..8021fea780527 100644 --- a/packages/react-devtools-extensions/src/contentScript.js +++ b/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); } }