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

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. |

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) {

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

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);
  });