fix: remove usage of destructuring for IE11 compat (#503)

Author: pmmmwh

client/ErrorOverlayEntry.js

@@ -1,6 +1,6 @@
 /* global __react_refresh_error_overlay__, __react_refresh_socket__, __resourceQuery */
 
-const { handleError, handleUnhandledRejection } = require('./utils/errorEventHandlers.js');
+const events = require('./utils/errorEventHandlers.js');
 const formatWebpackErrors = require('./utils/formatWebpackErrors.js');
 const runWithPatchedUrl = require('./utils/patchUrl.js');
 const runWithRetry = require('./utils/retry.js');
@@ -83,11 +83,11 @@ if (process.env.NODE_ENV !== 'production') {
           __react_refresh_socket__.init(compileMessageHandler, __resourceQuery);
         }, 3);
         // Registers handlers for runtime errors
-        handleError(function handleError(error) {
+        events.handleError(function handleError(error) {
           hasRuntimeErrors = true;
           __react_refresh_error_overlay__.handleRuntimeError(error);
         });
-        handleUnhandledRejection(function handleUnhandledPromiseRejection(error) {
+        events.handleUnhandledRejection(function handleUnhandledPromiseRejection(error) {
           hasRuntimeErrors = true;
           __react_refresh_error_overlay__.handleRuntimeError(error);
         });

overlay/components/CompileErrorTrace.js

@@ -1,7 +1,7 @@
 const ansiHTML = require('ansi-html-community');
 const entities = require('html-entities');
 const theme = require('../theme.js');
-const { formatFilename } = require('../utils.js');
+const utils = require('../utils.js');
 
 ansiHTML.setColors(theme);
 
@@ -26,7 +26,7 @@ function CompileErrorTrace(document, root, props) {
       .replace(/^(.*:)\s.*:(\s.*)$/, '$1$2');
 
     if (errorParts[0]) {
-      errorParts[0] = formatFilename(errorParts[0]);
+      errorParts[0] = utils.formatFilename(errorParts[0]);
     }
 
     errorParts.unshift(errorMessage);

overlay/components/RuntimeErrorStack.js

@@ -1,6 +1,6 @@
 const ErrorStackParser = require('error-stack-parser');
 const theme = require('../theme.js');
-const { formatFilename } = require('../utils.js');
+const utils = require('../utils.js');
 
 /**
  * @typedef {Object} RuntimeErrorStackProps
@@ -59,7 +59,7 @@ function RuntimeErrorStack(document, root, props) {
     const fileName = document.createElement('div');
     fileName.innerHTML =
       '  ' +
-      formatFilename(currentStack.fileName) +
+      utils.formatFilename(currentStack.fileName) +
       ':' +
       currentStack.lineNumber +
       ':' +

overlay/index.js

@@ -3,7 +3,7 @@ const RuntimeErrorHeader = require('./components/RuntimeErrorHeader.js');
 const CompileErrorContainer = require('./containers/CompileErrorContainer.js');
 const RuntimeErrorContainer = require('./containers/RuntimeErrorContainer.js');
 const theme = require('./theme.js');
-const { debounce, removeAllChildren } = require('./utils.js');
+const utils = require('./utils.js');
 
 /**
  * @callback RenderFn
@@ -176,7 +176,7 @@ function render() {
       currentFocusId = currentFocus.id;
     }
 
-    removeAllChildren(root);
+    utils.removeAllChildren(root);
 
     if (currentCompileErrorMessage) {
       currentMode = 'compileError';
@@ -300,7 +300,7 @@ function showRuntimeErrors(errors) {
  * @param {Error[]} errors
  * @returns {void}
  */
-const debouncedShowRuntimeErrors = debounce(showRuntimeErrors, 30);
+const debouncedShowRuntimeErrors = utils.debounce(showRuntimeErrors, 30);
 
 /**
  * Detects if an error is a Webpack compilation error.