diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index 16198d3374a..f9d814fdd11 100644 --- 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 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); });