Warn when Fast Refresh is disabled (React <16.10) (#15931)

Author: Timer

errors/react-version.md

@@ -0,0 +1,51 @@
+# Minimum React Version
+
+#### Why This Error Occurred
+
+Your project is using an old version of `react` or `react-dom` that does not
+meet the suggested minimum version requirement.
+
+Next.js suggests using, at a minimum, `react@16.10.0` and `react-dom@16.10.0`.
+Older versions of `react` and `react-dom` do work with Next.js, however, they do
+not enable all of Next.js' features.
+
+For example, the following features are not enabled with old React versions:
+
+- [Fast Refresh](https://nextjs.org/docs/basic-features/fast-refresh): instantly
+  view edits to your app without losing component state
+- Component stack trace in development: see the component tree that lead up to
+  an error
+- Hydration mismatch warnings: trace down discrepancies in your React tree that
+  cause performance problems
+
+This list is not exhaustive, but illustrative in the value of upgrading React!
+
+#### Possible Ways to Fix It
+
+**Via npm**
+
+```bash
+npm upgrade react@latest react-dom@latest
+```
+
+**Via Yarn**
+
+```bash
+yarn add react@latest react-dom@latest
+```
+
+**Manually** Open your `package.json` and upgrade `react` and `react-dom`:
+
+```json
+{
+  "dependencies": {
+    "react": "^16.10.0",
+    "react-dom": "^16.10.0"
+  }
+}
+```
+
+### Useful Links
+
+- [Fast Refresh blog post](https://nextjs.org/blog/next-9-4#fast-refresh)
+- [Fast Refresh docs](https://nextjs.org/docs/basic-features/fast-refresh)

packages/next/build/webpack-config.ts

@@ -290,7 +290,7 @@ export default async function getBaseWebpackConfig(
       } as ClientEntries)
     : undefined
 
-  let typeScriptPath
+  let typeScriptPath: string | undefined
   try {
     typeScriptPath = resolveRequest('typescript', `${dir}/`)
   } catch (_) {}
@@ -302,7 +302,7 @@ export default async function getBaseWebpackConfig(
   let jsConfig
   // jsconfig is a subset of tsconfig
   if (useTypeScript) {
-    const ts = (await import(typeScriptPath)) as typeof import('typescript')
+    const ts = (await import(typeScriptPath!)) as typeof import('typescript')
     const tsConfig = await getTypeScriptConfiguration(ts, tsConfigPath)
     jsConfig = { compilerOptions: tsConfig.options }
   }

packages/next/cli/next-dev.ts

@@ -4,6 +4,7 @@ import arg from 'next/dist/compiled/arg/index.js'
 import { existsSync } from 'fs'
 import startServer from '../server/lib/start-server'
 import { printAndExit } from '../server/lib/utils'
+import * as Log from '../build/output/log'
 import { startedDevelopmentServer } from '../build/output'
 import { cliCommand } from '../bin/next'
 
@@ -56,6 +57,35 @@ const nextDev: cliCommand = (argv) => {
     printAndExit(`> No such directory exists as the project root: ${dir}`)
   }
 
+  async function preflight() {
+    const { getPackageVersion } = await import('../lib/get-package-version')
+    const semver = await import('next/dist/compiled/semver').then(
+      (res) => res.default
+    )
+
+    const reactVersion: string | null = await getPackageVersion({
+      cwd: dir,
+      name: 'react',
+    })
+    if (reactVersion && semver.lt(reactVersion, '16.10.0')) {
+      Log.warn(
+        'Fast Refresh is disabled in your application due to an outdated `react` version. Please upgrade 16.10 or newer!' +
+          ' Read more: https://err.sh/next.js/react-version'
+      )
+    } else {
+      const reactDomVersion: string | null = await getPackageVersion({
+        cwd: dir,
+        name: 'react-dom',
+      })
+      if (reactDomVersion && semver.lt(reactDomVersion, '16.10.0')) {
+        Log.warn(
+          'Fast Refresh is disabled in your application due to an outdated `react-dom` version. Please upgrade 16.10 or newer!' +
+            ' Read more: https://err.sh/next.js/react-version'
+        )
+      }
+    }
+  }
+
   const port = args['--port'] || 3000
   const appUrl = `http://${args['--hostname'] || 'localhost'}:${port}`
 
@@ -66,6 +96,9 @@ const nextDev: cliCommand = (argv) => {
   )
     .then(async (app) => {
       startedDevelopmentServer(appUrl)
+      // Start preflight after server is listening and ignore errors:
+      preflight().catch(() => {})
+      // Finalize server bootup:
       await app.prepare()
     })
     .catch((err) => {

packages/next/compiled/conf/index.js

@@ -0,0 +1,15 @@
+The ISC License
+
+Copyright (c) Isaac Z. Schlueter and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

packages/next/compiled/jsonwebtoken/index.js

@@ -0,0 +1 @@
+{"name":"semver","main":"index.js","license":"ISC"}

packages/next/compiled/semver/LICENSE

@@ -0,0 +1,42 @@
+//  issuer.endsWith(path.posix.sep) || issuer.endsWith(path.win32.sep)
+import findUp from 'next/dist/compiled/find-up'
+import * as path from 'path'
+import { promises as fs } from 'fs'
+import JSON5 from 'next/dist/compiled/json5'
+import { resolveRequest } from './resolve-request'
+
+export async function getPackageVersion({
+  cwd,
+  name,
+}: {
+  cwd: string
+  name: string
+}): Promise<string | null> {
+  const configurationPath: string | undefined = await findUp('package.json', {
+    cwd,
+  })
+  if (!configurationPath) {
+    return null
+  }
+
+  const content = await fs.readFile(configurationPath, 'utf-8')
+  const packageJson: any = JSON5.parse(content)
+
+  const { dependencies = {}, devDependencies = {} } = packageJson || {}
+  if (!(dependencies[name] || devDependencies[name])) {
+    return null
+  }
+
+  const cwd2 =
+    cwd.endsWith(path.posix.sep) || cwd.endsWith(path.win32.sep)
+      ? cwd
+      : `${cwd}/`
+
+  try {
+    const targetPath = resolveRequest(`${name}/package.json`, cwd2)
+    const targetContent = await fs.readFile(targetPath, 'utf-8')
+    return JSON5.parse(targetContent).version ?? null
+  } catch {
+    return null
+  }
+}

packages/next/compiled/semver/index.js

@@ -1,7 +1,7 @@
 import resolve from 'next/dist/compiled/resolve/index.js'
 import path from 'path'
 
-export function resolveRequest(req: string, issuer: string) {
+export function resolveRequest(req: string, issuer: string): string {
   // The `resolve` package is prebuilt through ncc, which prevents
   // PnP from being able to inject itself into it. To circumvent
   // this, we simply use PnP directly when available.