diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js index 88ced54db1535..b439fe1d00b65 100644 --- a/packages/react-devtools-extensions/src/main.js +++ b/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); diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js index 04da1c6ce7c16..8024b373ba67e 100644 --- a/packages/react-devtools-extensions/webpack.backend.js +++ b/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'), }, }, diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index 69129d3d246e0..1aa5988a17457 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/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'), }, }, diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js index 8ec822bee2be8..a3214164d7bcd 100644 --- a/packages/react-devtools-inline/webpack.config.js +++ b/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: [ diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js index 489d7ad83a552..40099b0875e59 100644 --- a/packages/react-devtools-shell/webpack.config.js +++ b/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'), }, },