fix[devtools]: fixed duplicated backend activation with multiple renderers (#26807)

hoxyq · web-flow · commit 67a05d03e38b · 2023-05-12T14:59:53.000+01:00
## Summary Initially reported in #26797. Was not able to reproduce the exact same problem, but found this case: 1. Open corresponding codepen from the issue in debug mode 2. Open components tab of the extension 3. Refresh the page Received multiple errors: - Warning in the Console tab: Invalid renderer id "2". - Error in the Components tab: Uncaught Error: Cannot add node "3" because a node with that id is already in the Store. This problem has occurred after landing a fix in #26779. Looks like Chrome is keeping the injected scripts (the backend in this case) and we start backend twice.
diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js
@@ -29,5 +29,6 @@ function setup(hook: ?DevToolsHook) {
     initBackend,
     setupNativeStyleEditor,
   });
+
   hook.emit('devtools-backend-installed', COMPACT_VERSION_NAME);
 }
diff --git a/packages/react-devtools-extensions/src/backendManager.js b/packages/react-devtools-extensions/src/backendManager.js
@@ -58,7 +58,7 @@ function setup(hook: ?DevToolsHook) {
 
   // register renderers that have already injected themselves.
   hook.renderers.forEach(renderer => {
-    registerRenderer(renderer);
+    registerRenderer(renderer, hook);
   });
 
   // Activate and remove from required all present backends, registered within the hook
@@ -71,7 +71,7 @@ function setup(hook: ?DevToolsHook) {
 
   // register renderers that inject themselves later.
   hook.sub('renderer', ({renderer}) => {
-    registerRenderer(renderer);
+    registerRenderer(renderer, hook);
     updateRequiredBackends();
   });
 
@@ -84,19 +84,24 @@ function setup(hook: ?DevToolsHook) {
 
 const requiredBackends = new Set<string>();
 
-function registerRenderer(renderer: ReactRenderer) {
+function registerRenderer(renderer: ReactRenderer, hook: DevToolsHook) {
   let version = renderer.reconcilerVersion || renderer.version;
   if (!hasAssignedBackend(version)) {
     version = COMPACT_VERSION_NAME;
   }
-  requiredBackends.add(version);
+
+  // Check if required backend is already activated, no need to require again
+  if (!hook.backends.has(version)) {
+    requiredBackends.add(version);
+  }
 }
 
 function activateBackend(version: string, hook: DevToolsHook) {
   const backend = hook.backends.get(version);
   if (!backend) {
     throw new Error(`Could not find backend for version "${version}"`);
   }
+
   const {Agent, Bridge, initBackend, setupNativeStyleEditor} = backend;
   const bridge = new Bridge({
     listen(fn) {
@@ -157,6 +162,10 @@ function activateBackend(version: string, hook: DevToolsHook) {
 
 // tell the service worker which versions of backends are needed for the current page
 function updateRequiredBackends() {
+  if (requiredBackends.size === 0) {
+    return;
+  }
+
   window.postMessage(
     {
       source: 'react-devtools-backend-manager',

Original file line number	Diff line number	Diff line change
`@@ -29,5 +29,6 @@ function setup(hook: ?DevToolsHook) {`
`29`	`29`	`initBackend,`
`30`	`30`	`setupNativeStyleEditor,`
`31`	`31`	`});`
	`32`	`+`
`32`	`33`	`hook.emit('devtools-backend-installed', COMPACT_VERSION_NAME);`
`33`	`34`	`}`