From efeaa93cfdc981e8ae04b18b9f18884f524412ef Mon Sep 17 00:00:00 2001
From: Luna <lunaris.ruan@gmail.com>
Date: Mon, 16 Aug 2021 12:08:43 -0700
Subject: [PATCH] make parseHookNames a separate webpack module

---
 .../react-devtools-extensions/src/main.js     | 36 +++++++++----------
 .../src/parseHookNames/index.js               |  8 ++---
 .../webpack.config.js                         |  1 +
 3 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 514e48514d785..44cf757bda128 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -12,7 +12,6 @@ import {
   getSavedComponentFilters,
   getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
-import {parseHookNames, purgeCachedMetadata} from './parseHookNames';
 import {
   localStorageGetItem,
   localStorageRemoveItem,
@@ -210,23 +209,24 @@ function createPanelIfReactLoaded() {
 
         render = (overrideTab = mostRecentOverrideTab) => {
           mostRecentOverrideTab = overrideTab;
-
-          root.render(
-            createElement(DevTools, {
-              bridge,
-              browserTheme: getBrowserTheme(),
-              componentsPortalContainer,
-              enabledInspectedElementContextMenu: true,
-              loadHookNames: parseHookNames,
-              overrideTab,
-              profilerPortalContainer,
-              purgeCachedHookNamesMetadata: purgeCachedMetadata,
-              showTabBar: false,
-              store,
-              warnIfUnsupportedVersionDetected: true,
-              viewAttributeSourceFunction,
-              viewElementSourceFunction,
-            }),
+          import('./parseHookNames').then(
+            ({parseHookNames, purgeCachedMetadata}) => {
+              createElement(DevTools, {
+                bridge,
+                browserTheme: getBrowserTheme(),
+                componentsPortalContainer,
+                enabledInspectedElementContextMenu: true,
+                loadHookNames: parseHookNames,
+                overrideTab,
+                profilerPortalContainer,
+                purgeCachedHookNamesMetadata: purgeCachedMetadata,
+                showTabBar: false,
+                store,
+                warnIfUnsupportedVersionDetected: true,
+                viewAttributeSourceFunction,
+                viewElementSourceFunction,
+              });
+            },
           );
         };
 
diff --git a/packages/react-devtools-extensions/src/parseHookNames/index.js b/packages/react-devtools-extensions/src/parseHookNames/index.js
index ed178c3f200b4..79b2cf1aae548 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/index.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/index.js
@@ -12,17 +12,13 @@
 // This file uses workerize to load ./parseHookNames.worker as a webworker and instanciates it,
 // exposing flow typed functions that can be used on other files.
 
-import * as parseHookNamesModule from './parseHookNames';
 import WorkerizedParseHookNames from './parseHookNames.worker';
-
-type ParseHookNamesModule = typeof parseHookNamesModule;
+import typeof * as ParseHookNamesModule from './parseHookNames';
 
 // $FlowFixMe
 const wasmMappingsURL = chrome.extension.getURL('mappings.wasm');
 
-const workerizedParseHookNames: ParseHookNamesModule = window.Worker
-  ? WorkerizedParseHookNames()
-  : parseHookNamesModule;
+const workerizedParseHookNames: ParseHookNamesModule = WorkerizedParseHookNames();
 
 type ParseHookNames = $PropertyType<ParseHookNamesModule, 'parseHookNames'>;
 
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index b3a92762ae6ca..664ec8267c353 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -41,6 +41,7 @@ module.exports = {
   },
   output: {
     path: __dirname + '/build',
+    publicPath: '/build/',
     filename: '[name].js',
   },
   node: {