Remove duplicated config and update react refresh client

Author: charrondev

packages/react-dev-utils/errorOverlayModuleEntry.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+// This file is currently required because the error overlay has a bug preventing the its outright disabling.
+
+'use strict';
+
+function handleRuntimeError() {
+  // Stubbed out due to a bug.
+}
+function clearRuntimeErrors() {
+  // Stubbed out due to a bug.
+}
+
+module.exports = {
+  handleRuntimeError,
+  clearRuntimeErrors,
+};

packages/react-dev-utils/webpackFastRefreshDevClient.js

@@ -243,7 +243,10 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   }
 
   function handleApplyUpdates(err, updatedModules) {
-    if (err || !updatedModules || hadRuntimeError) {
+    const hasReactRefresh = process.env.REACT_REFRESH;
+    const wantsForcedReload = err || !updatedModules || hadRuntimeError;
+    // React refresh can handle hot-reloading over errors.
+    if (!hasReactRefresh && wantsForcedReload) {
       window.location.reload();
       return;
     }

packages/react-dev-utils/webpackHotDevClient.js

@@ -93,6 +93,10 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
         WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+        // Whether or not react-refresh is enabled.
+        // react-refresh is not 100% stable at this time,
+        // which is why it's disabled by default.
+        REACT_REFRESH: process.env.REACT_REFRESH || false,
       }
     );
   // Stringify all values so we can feed into webpack DefinePlugin

packages/react-scripts/config/env.js

@@ -43,11 +43,9 @@ const appPackageJson = require(paths.appPackageJson);
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 
-// React refresh isn't 100% stable right now. We have a feature flag to enable it.
-const shouldUseReactRefresh = process.env.REACT_REFRESH === 'true';
-const webpackDevClientEntry = shouldUseReactRefresh
-  ? require.resolve('react-dev-utils/webpackFastRefreshDevClient')
-  : require.resolve('react-dev-utils/webpackHotDevClient');
+const webpackDevClientEntry = require.resolve(
+  'react-dev-utils/webpackHotDevClient'
+);
 
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
@@ -85,6 +83,8 @@ module.exports = function(webpackEnv) {
   // Get environment variables to inject into our app.
   const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
 
+  const shouldUseReactRefresh = env.raw.REACT_REFRESH;
+
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
@@ -168,7 +168,7 @@ module.exports = function(webpackEnv) {
       // the line below with these two lines if you prefer the stock client:
       // require.resolve('webpack-dev-server/client') + '?/',
       // require.resolve('webpack/hot/dev-server'),
-      isEnvDevelopment && webpackDevClientEntry,
+      isEnvDevelopment && !shouldUseReactRefresh && webpackDevClientEntry,
       // Finally, this is your app's code:
       paths.appIndexJs,
       // We include the app code last so that if there is a runtime error during
@@ -620,7 +620,13 @@ module.exports = function(webpackEnv) {
       // Provide fast-refresh https://github.com/facebook/react/tree/master/packages/react-refresh
       isEnvDevelopment &&
         shouldUseReactRefresh &&
-        new ReactRefreshWebpackPlugin({ disableRefreshCheck: true }),
+        new ReactRefreshWebpackPlugin({
+          disableRefreshCheck: true,
+          overlay: {
+            entry: webpackDevClientEntry,
+            module: require.resolve('react-dev-utils/errorOverlayModuleEntry'),
+          },
+        }),
       // Watcher doesn't work well if you mistype casing in a path so we use
       // a plugin that prints an error when you attempt to do this.
       // See https://github.com/facebook/create-react-app/issues/240

packages/react-scripts/config/webpack.config.js

@@ -80,6 +80,7 @@
     "url-loader": "2.3.0",
     "webpack": "4.42.0",
     "webpack-dev-server": "3.10.3",
+    "webpack-hot-middleware": "^2.25.0",
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "4.3.1"
   },