Remove full reload overlay and warn in CLI instead (#37874)

- Always perform a full reload when needed without blocking with the overlay. - Old client warnings re-added. - Post client warning to dev server and print it in the CLI. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
vercel · Jun 22, 2022 · 2ff660c · 2ff660c
1 parent ee89517
commit 2ff660c
Show file tree

Hide file tree

Showing 16 changed files with 140 additions and 285 deletions.
diff --git a/packages/next/client/dev/error-overlay/hot-dev-client.js b/packages/next/client/dev/error-overlay/hot-dev-client.js
@@ -31,7 +31,6 @@ import {
   onBuildError,
   onBuildOk,
   onRefresh,
-  onFullRefreshNeeded,
 } from 'next/dist/compiled/@next/react-dev-overlay/dist/client'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import { addMessageListener, sendMessage } from './websocket'
@@ -314,15 +313,23 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   function handleApplyUpdates(err, updatedModules) {
     if (err || hadRuntimeError || !updatedModules) {
       if (err) {
-        performFullRefresh(err)
+        console.warn(
+          '[Fast Refresh] performing full reload\n\n' +
+            "Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree.\n" +
+            'You might have a file which exports a React component but also exports a value that is imported by a non-React component file.\n' +
+            'Consider migrating the non-React component export to a separate file and importing it into both files.\n\n' +
+            'It is also possible the parent component of the component you edited is a class component, which disables Fast Refresh.\n' +
+            'Fast Refresh requires at least one parent function component in your React tree.'
+        )
       } else if (hadRuntimeError) {
-        performFullRefresh()
+        console.warn(
+          '[Fast Refresh] performing full reload because your application had an unrecoverable error'
+        )
       }
+      performFullReload(err)
       return
     }
 
-    clearFullRefreshStorage()
-
     const hasUpdates = Boolean(updatedModules.length)
     if (typeof onHotUpdateSuccess === 'function') {
       // Maybe we want to do something.
@@ -356,27 +363,19 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   )
 }
 
-const FULL_REFRESH_STORAGE_KEY = '_has_warned_about_full_refresh'
-
-function performFullRefresh(err) {
-  if (!hasAlreadyWarnedAboutFullRefresh()) {
-    sessionStorage.setItem(FULL_REFRESH_STORAGE_KEY, 'true')
-    const reason =
-      err &&
-      ((err.stack && err.stack.split('\n').slice(0, 5).join('\n')) ||
-        err.message ||
-        err + '')
-    onFullRefreshNeeded(reason)
-  } else {
-    window.location.reload()
-  }
-}
-
-function hasAlreadyWarnedAboutFullRefresh() {
-  return sessionStorage.getItem(FULL_REFRESH_STORAGE_KEY) !== null
-}
+function performFullReload(err) {
+  const stackTrace =
+    err &&
+    ((err.stack && err.stack.split('\n').slice(0, 5).join('\n')) ||
+      err.message ||
+      err + '')
+
+  sendMessage(
+    JSON.stringify({
+      event: 'client-full-reload',
+      stackTrace,
+    })
+  )
 
-function clearFullRefreshStorage() {
-  if (sessionStorage.getItem(FULL_REFRESH_STORAGE_KEY) !== 'ignore')
-    sessionStorage.removeItem(FULL_REFRESH_STORAGE_KEY)
+  window.location.reload()
 }
diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
@@ -15,6 +15,7 @@ import {
   runDependingOnPageType,
 } from '../../build/entries'
 import { watchCompilers } from '../../build/output'
+import * as Log from '../../build/output/log'
 import getBaseWebpackConfig from '../../build/webpack-config'
 import { API_ROUTE, APP_DIR_ALIAS } from '../../lib/constants'
 import { recursiveDelete } from '../../lib/recursive-delete'
@@ -351,6 +352,15 @@ export default class HotReloader {
               }
               break
             }
+            case 'client-full-reload': {
+              Log.warn(
+                'Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works'
+              )
+              if (payload.stackTrace) {
+                console.warn(payload.stackTrace)
+              }
+              break
+            }
             default: {
               break
             }

diff --git a/packages/react-dev-overlay/src/client.ts b/packages/react-dev-overlay/src/client.ts
@@ -85,22 +85,11 @@ function onBuildError(message: string) {
   Bus.emit({ type: Bus.TYPE_BUILD_ERROR, message })
 }
 
-function onFullRefreshNeeded(reason?: string) {
-  Bus.emit({ type: Bus.TYPE_FULL_REFRESH_NEEDED, reason: reason ?? null })
-}
-
 function onRefresh() {
   Bus.emit({ type: Bus.TYPE_REFRESH })
 }
 
 export { getErrorByType } from './internal/helpers/getErrorByType'
 export { getServerError } from './internal/helpers/nodeStackFrames'
 export { default as ReactDevOverlay } from './internal/ReactDevOverlay'
-export {
-  onBuildOk,
-  onBuildError,
-  onFullRefreshNeeded,
-  register,
-  unregister,
-  onRefresh,
-}
+export { onBuildOk, onBuildError, register, unregister, onRefresh }
diff --git a/packages/react-dev-overlay/src/internal/ReactDevOverlay.tsx b/packages/react-dev-overlay/src/internal/ReactDevOverlay.tsx
@@ -4,7 +4,6 @@ import * as Bus from './bus'
 import { ShadowPortal } from './components/ShadowPortal'
 import { BuildError } from './container/BuildError'
 import { Errors, SupportedErrorEvent } from './container/Errors'
-import { FullRefreshWarning } from './container/FullRefreshWarning'
 import { ErrorBoundary } from './ErrorBoundary'
 import { Base } from './styles/Base'
 import { ComponentStyles } from './styles/ComponentStyles'
@@ -14,8 +13,6 @@ type OverlayState = {
   nextId: number
   buildError: string | null
   errors: SupportedErrorEvent[]
-  fullRefreshReason: string | null
-  isAboutToFullRefresh: boolean
 }
 
 function reducer(state: OverlayState, ev: Bus.BusEvent): OverlayState {
@@ -26,19 +23,6 @@ function reducer(state: OverlayState, ev: Bus.BusEvent): OverlayState {
     case Bus.TYPE_BUILD_ERROR: {
       return { ...state, buildError: ev.message }
     }
-    case Bus.TYPE_FULL_REFRESH_NEEDED: {
-      const aboutToRefreshNewState: OverlayState = {
-        ...state,
-        fullRefreshReason: null,
-        isAboutToFullRefresh: true,
-      }
-
-      if (ev.reason === null) {
-        return aboutToRefreshNewState
-      }
-
-      return { ...aboutToRefreshNewState, fullRefreshReason: ev.reason }
-    }
     case Bus.TYPE_REFRESH: {
       return { ...state, buildError: null, errors: [] }
     }
@@ -58,7 +42,7 @@ function reducer(state: OverlayState, ev: Bus.BusEvent): OverlayState {
   }
 }
 
-type ErrorType = 'runtime' | 'build' | 'full-refresh'
+type ErrorType = 'runtime' | 'build'
 
 const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({
   children,
@@ -73,8 +57,6 @@ const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({
     nextId: 1,
     buildError: null,
     errors: [],
-    fullRefreshReason: null,
-    isAboutToFullRefresh: false,
   })
 
   React.useEffect(() => {
@@ -93,9 +75,8 @@ const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({
 
   const hasBuildError = state.buildError != null
   const hasRuntimeErrors = Boolean(state.errors.length)
-  const isAboutToFullRefresh = state.isAboutToFullRefresh
 
-  const isMounted = hasBuildError || hasRuntimeErrors || isAboutToFullRefresh
+  const isMounted = hasBuildError || hasRuntimeErrors
 
   return (
     <React.Fragment>
@@ -109,17 +90,9 @@ const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({
           <ComponentStyles />
 
           {shouldPreventDisplay(
-            hasBuildError
-              ? 'build'
-              : hasRuntimeErrors
-              ? 'runtime'
-              : isAboutToFullRefresh
-              ? 'full-refresh'
-              : null,
+            hasBuildError ? 'build' : hasRuntimeErrors ? 'runtime' : null,
             preventDisplay
-          ) ? null : isAboutToFullRefresh ? (
-            <FullRefreshWarning reason={state.fullRefreshReason} />
-          ) : hasBuildError ? (
+          ) ? null : hasBuildError ? (
             <BuildError message={state.buildError!} />
           ) : hasRuntimeErrors ? (
             <Errors errors={state.errors} />

diff --git a/packages/react-dev-overlay/src/internal/bus.ts b/packages/react-dev-overlay/src/internal/bus.ts
@@ -2,7 +2,6 @@ import { StackFrame } from 'stacktrace-parser'
 
 export const TYPE_BUILD_OK = 'build-ok'
 export const TYPE_BUILD_ERROR = 'build-error'
-export const TYPE_FULL_REFRESH_NEEDED = 'full-refresh-needed'
 export const TYPE_REFRESH = 'fast-refresh'
 export const TYPE_UNHANDLED_ERROR = 'unhandled-error'
 export const TYPE_UNHANDLED_REJECTION = 'unhandled-rejection'
@@ -13,10 +12,6 @@ export type BuildError = {
   message: string
 }
 export type FastRefresh = { type: typeof TYPE_REFRESH }
-export type FullRefreshNeeded = {
-  type: typeof TYPE_FULL_REFRESH_NEEDED
-  reason: string | null
-}
 export type UnhandledError = {
   type: typeof TYPE_UNHANDLED_ERROR
   reason: Error
@@ -31,7 +26,6 @@ export type BusEvent =
   | BuildOk
   | BuildError
   | FastRefresh
-  | FullRefreshNeeded
   | UnhandledError
   | UnhandledRejection
 

diff --git a/packages/react-dev-overlay/src/internal/container/FullRefreshWarning.tsx b/packages/react-dev-overlay/src/internal/container/FullRefreshWarning.tsx
diff --git a/packages/react-dev-overlay/src/internal/styles/ComponentStyles.tsx b/packages/react-dev-overlay/src/internal/styles/ComponentStyles.tsx
@@ -8,7 +8,6 @@ import { styles as terminal } from '../components/Terminal/styles'
 import { styles as toast } from '../components/Toast'
 import { styles as buildErrorStyles } from '../container/BuildError'
 import { styles as containerErrorStyles } from '../container/Errors'
-import { styles as fullRefreshWarningStyles } from '../container/FullRefreshWarning'
 import { styles as containerRuntimeErrorStyles } from '../container/RuntimeError'
 import { noop as css } from '../helpers/noop-template'
 
@@ -26,7 +25,6 @@ export function ComponentStyles() {
         ${buildErrorStyles}
         ${containerErrorStyles}
         ${containerRuntimeErrorStyles}
-        ${fullRefreshWarningStyles}
       `}
     </style>
   )

diff --git a/test/development/acceptance/helpers.ts b/test/development/acceptance/helpers.ts
@@ -1,5 +1,4 @@
 import {
-  ignoreFullRefreshWarnings,
   getRedboxDescription,
   getRedboxHeader,
   getRedboxSource,
@@ -31,7 +30,6 @@ export async function sandbox(
   }
   await next.start()
   const browser = await webdriver(next.appPort, '/')
-  await ignoreFullRefreshWarnings(browser)
   return {
     session: {
       async write(filename, content) {