Change if react version supports Fast Refresh

- Remove FR warning for older react version
facebook · Oct 17, 2020 · a806e97 · a806e97
1 parent 6f3e32e
commit a806e97
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 16 deletions.
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
@@ -243,7 +243,7 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   }
 
   function handleApplyUpdates(err, updatedModules) {
-    const hasReactRefresh = process.env.FAST_REFRESH !== 'false';
+    const hasReactRefresh = process.env.FAST_REFRESH;
     const wantsForcedReload = err || !updatedModules || hadRuntimeError;
     // React refresh can handle hot-reloading over errors.
     if (!hasReactRefresh && wantsForcedReload) {

diff --git 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.
+        // We support Fast Refresh in React 16.10.0 or greater
+        // For the older version, we will fallback to full reload
         // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
+        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
@@ -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);
     });