feat(overlay): hook up runtime utils to use customized error overlay

Author: pmmmwh

src/index.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const { createRefreshTemplate, injectRefreshEntry, validateOptions } = require('./helpers');
-const { refreshUtils } = require('./runtime/globals');
+const { errorOverlay, refreshUtils } = require('./runtime/globals');
 
 class ReactRefreshPlugin {
   /**
@@ -36,6 +36,7 @@ class ReactRefreshPlugin {
 
     // Inject refresh utilities to Webpack's global scope
     const providePlugin = new webpack.ProvidePlugin({
+      [errorOverlay]: this.options.overlay && require.resolve(this.options.overlay.module),
       [refreshUtils]: require.resolve('./runtime/utils'),
     });
     providePlugin.apply(compiler);

src/runtime/globals.js

@@ -1 +1,3 @@
+module.exports.errorOverlay = '__react_refresh_error_overlay__';
+
 module.exports.refreshUtils = '__react_refresh_utils__';

src/runtime/utils.js

@@ -1,5 +1,5 @@
+/* global __react_refresh_error_overlay__ */
 const Refresh = require('react-refresh/runtime');
-const ErrorOverlay = require('../overlay');
 
 /**
  * Extracts exports from a webpack module object.
@@ -73,7 +73,9 @@ function createHotErrorHandler(moduleId) {
    * @returns {void}
    */
   function hotErrorHandler(error) {
-    ErrorOverlay.handleRuntimeError(error);
+    if (__react_refresh_error_overlay__) {
+      __react_refresh_error_overlay__.handleRuntimeError(error);
+    }
   }
 
   /**
@@ -109,7 +111,9 @@ function createDebounceUpdate() {
       refreshTimeout = setTimeout(function() {
         refreshTimeout = undefined;
         Refresh.performReactRefresh();
-        ErrorOverlay.clearRuntimeErrors();
+        if (__react_refresh_error_overlay__) {
+          __react_refresh_error_overlay__.clearRuntimeErrors();
+        }
       }, 30);
     }
   }