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 b080dc57443..642792fb275 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -636,7 +636,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
@@ -645,6 +645,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 006e51ffa2a..99010f80d77 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -29,8 +29,13 @@
   "types": "./lib/react-app.d.ts",
   "dependencies": {
     "@babel/core": "7.10.5",
+<<<<<<< HEAD
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.0-beta.8",
     "@babel/plugin-syntax-bigint": "^7.8.3",
+=======
+    "@babel/plugin-syntax-bigint": "^7.8.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.4.1",
+>>>>>>> 66bf7dfc... feat: better refresh plugin integration (#9375)
     "@svgr/webpack": "5.4.0",
     "@typescript-eslint/eslint-plugin": "^3.3.0",
     "@typescript-eslint/parser": "^3.3.0",