From d0b4f5998a448622a5dac9b3ed7478d507bf1088 Mon Sep 17 00:00:00 2001
From: Michael Mok <pmmmwh@gmail.com>
Date: Wed, 29 Jul 2020 03:38:08 +0800
Subject: [PATCH] feat: better refresh plugin integration (#9375)

---
 .../react-dev-utils/refreshOverlayInterop.js  | 19 +++++++++++++++++++
 packages/react-error-overlay/src/index.js     |  2 +-
 .../react-scripts/config/webpack.config.js    |  8 +++++++-
 packages/react-scripts/package.json           |  2 +-
 4 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-dev-utils/refreshOverlayInterop.js

diff --git a/packages/react-dev-utils/refreshOverlayInterop.js b/packages/react-dev-utils/refreshOverlayInterop.js
new file mode 100644
index 00000000000..021c44ce35a
--- /dev/null
+++ b/packages/react-dev-utils/refreshOverlayInterop.js
@@ -0,0 +1,19 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const {
+  dismissRuntimeErrors,
+  reportRuntimeError,
+} = require('react-error-overlay');
+
+module.exports = {
+  clearRuntimeErrors: dismissRuntimeErrors,
+  handleRuntimeError: reportRuntimeError,
+};
diff --git a/packages/react-error-overlay/src/index.js b/packages/react-error-overlay/src/index.js
index 8afbdaab258..66da7cc267b 100644
--- a/packages/react-error-overlay/src/index.js
+++ b/packages/react-error-overlay/src/index.js
@@ -51,7 +51,7 @@ export function reportBuildError(error: string) {
 
 export function reportRuntimeError(
   error: Error,
-  options?: RuntimeReportingOption = {}
+  options: RuntimeReportingOptions = {}
 ) {
   currentRuntimeErrorOptions = options;
   crashWithFrames(handleRuntimeError(options))(error);
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 1dba35cf903..5e1935d8a0e 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -634,7 +634,7 @@ module.exports = function (webpackEnv) {
       // during a production build.
       // Otherwise React will be compiled in the very slow development mode.
       new webpack.DefinePlugin(env.stringified),
-      // This is necessary to emit hot updates (currently CSS only):
+      // This is necessary to emit hot updates (CSS and Fast Refresh):
       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
       // Experimental hot reloading for React .
       // https://github.com/facebook/react/tree/master/packages/react-refresh
@@ -643,6 +643,12 @@ module.exports = function (webpackEnv) {
         new ReactRefreshWebpackPlugin({
           overlay: {
             entry: webpackDevClientEntry,
+            // The expected exports are slightly different from what the overlay exports,
+            // so an interop is included here to enable feedback on module-level errors.
+            module: require.resolve('react-dev-utils/refreshOverlayInterop'),
+            // Since we ship a custom dev client and overlay integration,
+            // the bundled socket handling logic can be eliminated.
+            sockIntegration: false,
           },
         }),
       // Watcher doesn't work well if you mistype casing in a path so we use
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 12db4f1d957..28b22715349 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -29,7 +29,7 @@
   "types": "./lib/react-app.d.ts",
   "dependencies": {
     "@babel/core": "7.10.5",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.4.0-beta.8",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.4.1",
     "@svgr/webpack": "5.4.0",
     "@typescript-eslint/eslint-plugin": "^3.3.0",
     "@typescript-eslint/parser": "^3.3.0",