From 115e08ec333a32f2279f5c67ad5b095a5a1b0067 Mon Sep 17 00:00:00 2001
From: Jirat Ki <saakyz@gmail.com>
Date: Sat, 31 Oct 2020 16:17:24 +0800
Subject: [PATCH 1/2] Disable fast refresh if react version doesn't support

---
 packages/react-scripts/config/env.js    | 10 +++++++---
 packages/react-scripts/scripts/start.js | 12 ------------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index 0ad47cb9779..6c35d808949 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -11,6 +11,8 @@
 const fs = require('fs');
 const path = require('path');
 const paths = require('./paths');
+const semver = require('semver');
+const react = require(require.resolve('react', { paths: [paths.appPath] }));
 
 // Make sure that including paths.js after env.js will read .env variables.
 delete require.cache[require.resolve('./paths')];
@@ -94,10 +96,12 @@ function getClientEnvironment(publicUrl) {
         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.
         // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
+        // Fast Refresh is available in React 16.10.0 or greater
+        // For older versions will fallback to full reload
+        FAST_REFRESH:
+          semver.gte(react.version, '16.10.0') &&
+          process.env.FAST_REFRESH !== 'false',
       }
     );
   // Stringify all values so we can feed into webpack DefinePlugin
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index ffbb15d1204..43d406b7571 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -44,14 +44,10 @@ const {
   prepareUrls,
 } = require('react-dev-utils/WebpackDevServerUtils');
 const openBrowser = require('react-dev-utils/openBrowser');
-const semver = require('semver');
 const paths = require('../config/paths');
 const configFactory = require('../config/webpack.config');
 const createDevServerConfig = require('../config/webpackDevServer.config');
-const getClientEnvironment = require('../config/env');
-const react = require(require.resolve('react', { paths: [paths.appPath] }));
 
-const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
 const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;
 
@@ -147,14 +143,6 @@ checkBrowsers(paths.appPath, isInteractive)
         clearConsole();
       }
 
-      if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
-        console.log(
-          chalk.yellow(
-            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
-          )
-        );
-      }
-
       console.log(chalk.cyan('Starting the development server...\n'));
       openBrowser(urls.localUrlForBrowser);
     });

From cd96b4d331f381f4381bd8a7bfc25bbaac17973d Mon Sep 17 00:00:00 2001
From: Jirat Ki <saakyz@gmail.com>
Date: Sat, 31 Oct 2020 16:28:46 +0800
Subject: [PATCH 2/2] Update comment and support in 16.9.0

---
 packages/react-scripts/config/env.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index 6c35d808949..82e9fb3e195 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -97,10 +97,12 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
         // Whether or not react-refresh is enabled.
         // It is defined here so it is available in the webpackHotDevClient.
-        // Fast Refresh is available in React 16.10.0 or greater
-        // For older versions will fallback to full reload
+        //
+        // We use `react-refresh-webpack-plugin` for Fast Refresh
+        // which requries React version 16.9.0 or greater.
+        // For older versions, we will fallback to full reload
         FAST_REFRESH:
-          semver.gte(react.version, '16.10.0') &&
+          semver.gte(react.version, '16.9.0') &&
           process.env.FAST_REFRESH !== 'false',
       }
     );