Add Fast Refresh warning when using React < 16.10 (#9350)

Author: iansu

Diff for: docusaurus/docs/advanced-configuration.md

@@ -25,5 +25,5 @@ You can adjust various development and production settings by setting environmen
 | INLINE_RUNTIME_CHUNK    | 🚫 Ignored  |  ✅ Used   | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored  |  ✅ Used   | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | EXTEND_ESLINT           |   ✅ Used   |  ✅ Used   | When set to `true`, user provided ESLint configs will be used by `eslint-loader`. Note that any rules set to `"error"` will stop the application from building.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| FAST_REFRESH            |   ✅ Used   | 🚫 Ignored | When set to `true`, enables experimental support for fast refresh to allow you to tweak your components in real time without reloading the page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| FAST_REFRESH            |   ✅ Used   | 🚫 Ignored | When set to `false`, disables experimental support for Fast Refresh to allow you to tweak your components in real time without reloading the page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | TSC_COMPILE_ON_ERROR    |   ✅ Used   |  ✅ Used   | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |

Diff for: packages/react-dev-utils/webpackHotDevClient.js

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

Diff for: packages/react-scripts/config/env.js

@@ -97,7 +97,7 @@ function getClientEnvironment(publicUrl) {
         // 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: process.env.FAST_REFRESH !== 'false',
       }
     );
   // Stringify all values so we can feed into webpack DefinePlugin

Diff for: packages/react-scripts/scripts/start.js

@@ -44,10 +44,14 @@ 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;
 
@@ -95,6 +99,7 @@ checkBrowsers(paths.appPath, isInteractive)
     const config = configFactory('development');
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
+
     const useTypeScript = fs.existsSync(paths.appTsConfig);
     const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
     const urls = prepareUrls(
@@ -142,6 +147,14 @@ 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);
     });