Fixed web extensions

Author: Brian Vaughn

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

@@ -227,47 +227,57 @@ function createPanelIfReactLoaded() {
       let currentPanel = null;
       let needsToSyncElementSelection = false;
 
-      chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {
-        panel.onShown.addListener(() => {
-          if (needsToSyncElementSelection) {
-            needsToSyncElementSelection = false;
-            bridge.send('syncSelectionFromNativeElementsPanel');
-          }
+      chrome.devtools.panels.create(
+        '⚛ Components',
+        '',
+        'panel.html',
+        extensionPanel => {
+          extensionPanel.onShown.addListener(panel => {
+            if (needsToSyncElementSelection) {
+              needsToSyncElementSelection = false;
+              bridge.send('syncSelectionFromNativeElementsPanel');
+            }
 
-          if (currentPanel === panel) {
-            return;
-          }
+            if (currentPanel === panel) {
+              return;
+            }
 
-          currentPanel = panel;
-          componentsPortalContainer = panel.container;
+            currentPanel = panel;
+            componentsPortalContainer = panel.container;
 
-          if (componentsPortalContainer != null) {
-            ensureInitialHTMLIsCleared(componentsPortalContainer);
-            render('components');
-            panel.injectStyles(cloneStyleTags);
-          }
-        });
-        panel.onHidden.addListener(() => {
-          // TODO: Stop highlighting and stuff.
-        });
-      });
+            if (componentsPortalContainer != null) {
+              ensureInitialHTMLIsCleared(componentsPortalContainer);
+              render('components');
+              panel.injectStyles(cloneStyleTags);
+            }
+          });
+          extensionPanel.onHidden.addListener(panel => {
+            // TODO: Stop highlighting and stuff.
+          });
+        },
+      );
 
-      chrome.devtools.panels.create('⚛ Profiler', '', 'panel.html', panel => {
-        panel.onShown.addListener(() => {
-          if (currentPanel === panel) {
-            return;
-          }
+      chrome.devtools.panels.create(
+        '⚛ Profiler',
+        '',
+        'panel.html',
+        extensionPanel => {
+          extensionPanel.onShown.addListener(panel => {
+            if (currentPanel === panel) {
+              return;
+            }
 
-          currentPanel = panel;
-          profilerPortalContainer = panel.container;
+            currentPanel = panel;
+            profilerPortalContainer = panel.container;
 
-          if (profilerPortalContainer != null) {
-            ensureInitialHTMLIsCleared(profilerPortalContainer);
-            render('profiler');
-            panel.injectStyles(cloneStyleTags);
-          }
-        });
-      });
+            if (profilerPortalContainer != null) {
+              ensureInitialHTMLIsCleared(profilerPortalContainer);
+              render('profiler');
+              panel.injectStyles(cloneStyleTags);
+            }
+          });
+        },
+      );
 
       chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
 

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

@@ -30,7 +30,9 @@ module.exports = {
   resolve: {
     alias: {
       react: resolve(builtModulesDir, 'react'),
+      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
   },

packages/react-devtools-extensions/webpack.config.js

@@ -35,7 +35,9 @@ module.exports = {
   resolve: {
     alias: {
       react: resolve(builtModulesDir, 'react'),
+      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
   },

packages/react-devtools-inline/webpack.config.js

@@ -31,7 +31,9 @@ module.exports = {
   },
   externals: {
     react: 'react',
+    'react-debug-tools': 'react-debug-tools',
     'react-dom': 'react-dom',
+    'react-is': 'react-is',
     scheduler: 'scheduler',
   },
   plugins: [

packages/react-devtools-shell/webpack.config.js

@@ -35,6 +35,8 @@ const config = {
     alias: {
       react: resolve(builtModulesDir, 'react'),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
   },