From f798725f5f18e73c2d8894bbce48b194c950fbf3 Mon Sep 17 00:00:00 2001
From: Michael Mok <pmmmwh@gmail.com>
Date: Tue, 28 Jul 2020 16:56:48 +0800
Subject: [PATCH 1/4] chore(deps): bump react refresh plugin

---
 packages/react-scripts/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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",

From 439c3abb5f2b3d2f4d134c36e7044197ddce4a09 Mon Sep 17 00:00:00 2001
From: Michael Mok <pmmmwh@gmail.com>
Date: Tue, 28 Jul 2020 17:11:08 +0800
Subject: [PATCH 2/4] chore: fix flow error in error overlay index

---
 packages/react-error-overlay/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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);

From 71fabf2bee26e32105b5b33649aa4a51f55f0b86 Mon Sep 17 00:00:00 2001
From: Michael Mok <pmmmwh@gmail.com>
Date: Tue, 28 Jul 2020 17:21:14 +0800
Subject: [PATCH 3/4] feat: interop react-error-overlay APIs for refresh plugin

---
 .../react-dev-utils/refreshOverlayInterop.js  | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 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,
+};

From 607723096a93e381b1c745be6a53225797cc3f78 Mon Sep 17 00:00:00 2001
From: Michael Mok <pmmmwh@gmail.com>
Date: Tue, 28 Jul 2020 17:27:58 +0800
Subject: [PATCH 4/4] feat: better integrate react-error-overlay and refresh
 plugin

---
 packages/react-scripts/config/webpack.config.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

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