re-add hydration support to React 18 errors (#69757)

Re-lands hydration support for React 18 errors by reverting some things
that were part of #65058. Annotated specific parts with comments.

packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx

@@ -238,7 +238,6 @@ export function Errors({
   )
 
   const errorDetails: HydrationErrorState = (error as any).details || {}
-  const notes = errorDetails.notes || ''
   const [warningTemplate, serverContent, clientContent] =
     errorDetails.warning || [null, '', '']
 
@@ -252,6 +251,7 @@ export function Errors({
         .replace(/^Warning: /, '')
         .replace(/^Error: /, '')
     : null
+  const notes = isAppDir ? errorDetails.notes || '' : hydrationWarning
 
   return (
     <Overlay>
@@ -307,7 +307,9 @@ export function Errors({
               {/* If there's hydration warning, skip displaying the error name */}
               {hydrationWarning ? '' : error.name + ': '}
               <HotlinkedText
-                text={hydrationWarning || error.message}
+                text={
+                  isAppDir ? hydrationWarning || error.message : error.message
+                }
                 matcher={isNextjsLink}
               />
             </p>

packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx

@@ -66,7 +66,7 @@ export function PseudoHtmlDiff({
   firstContent: string
   secondContent: string
   reactOutputComponentDiff: string | undefined
-  hydrationMismatchType: 'tag' | 'text'
+  hydrationMismatchType: 'tag' | 'text' | 'text-in-tag'
 } & React.HTMLAttributes<HTMLPreElement>) {
   const isHtmlTagsWarning = hydrationMismatchType === 'tag'
   const isReactHydrationDiff = !!reactOutputComponentDiff

packages/next/src/client/components/react-dev-overlay/internal/helpers/hydration-error-info.ts

@@ -23,15 +23,42 @@ const htmlTagsWarnings = new Set([
   "In HTML, whitespace text nodes cannot be a child of <%s>. Make sure you don't have any extra whitespace between tags on each line of your source code.\nThis will cause a hydration error.",
 ])
 
-export const getHydrationWarningType = (msg: NullableText): 'tag' | 'text' => {
+// In React 18, the warning message is prefixed with "Warning: "
+const normalizeWarningMessage = (msg: string) => msg.replace(/^Warning: /, '')
+
+// Note: React 18 only
+const textAndTagsMismatchWarnings = new Set([
+  'Warning: Expected server HTML to contain a matching text node for "%s" in <%s>.%s',
+  'Warning: Did not expect server HTML to contain the text node "%s" in <%s>.%s',
+])
+
+// Note: React 18 only
+const textMismatchWarning =
+  'Warning: Text content did not match. Server: "%s" Client: "%s"%s'
+
+const isTextMismatchWarning = (msg: NullableText) => textMismatchWarning === msg
+const isTextInTagsMismatchWarning = (msg: NullableText) =>
+  Boolean(msg && textAndTagsMismatchWarnings.has(msg))
+
+export const getHydrationWarningType = (
+  msg: NullableText
+): 'tag' | 'text' | 'text-in-tag' => {
   if (isHtmlTagsWarning(msg)) return 'tag'
   return 'text'
 }
 
-const isHtmlTagsWarning = (msg: NullableText) =>
-  Boolean(msg && htmlTagsWarnings.has(msg))
+const isHtmlTagsWarning = (msg: NullableText) => {
+  if (msg && typeof msg === 'string') {
+    return htmlTagsWarnings.has(normalizeWarningMessage(msg))
+  }
+
+  return false
+}
 
-const isKnownHydrationWarning = (msg: NullableText) => isHtmlTagsWarning(msg)
+const isKnownHydrationWarning = (msg: NullableText) =>
+  isHtmlTagsWarning(msg) ||
+  isTextInTagsMismatchWarning(msg) ||
+  isTextMismatchWarning(msg)
 
 export const getReactHydrationDiffSegments = (msg: NullableText) => {
   if (msg) {
@@ -51,14 +78,18 @@ export const getReactHydrationDiffSegments = (msg: NullableText) => {
 export function storeHydrationErrorStateFromConsoleArgs(...args: any[]) {
   const [msg, serverContent, clientContent, componentStack] = args
   if (isKnownHydrationWarning(msg)) {
-    hydrationErrorState.warning = [
-      // remove the last %s from the message
-      msg,
-      serverContent,
-      clientContent,
-    ]
+    hydrationErrorState.warning = [msg, serverContent, clientContent]
     hydrationErrorState.componentStack = componentStack
     hydrationErrorState.serverContent = serverContent
     hydrationErrorState.clientContent = clientContent
+
+    return [
+      ...args,
+      // We tack on the hydration error message to the console.error message so that
+      // it matches the error we display in the redbox overlay
+      `\nSee more info here: https://nextjs.org/docs/messages/react-hydration-error`,
+    ]
   }
+
+  return args
 }

packages/next/src/client/components/react-dev-overlay/pages/client.ts

@@ -52,11 +52,13 @@ function handleError(error: unknown) {
 
 let origConsoleError = console.error
 function nextJsHandleConsoleError(...args: any[]) {
+  // To support React 19, this will need to be updated as follows:
+  // const error = process.env.NODE_ENV !== 'production' ? args[1] : args[0]
   // See https://github.com/facebook/react/blob/d50323eb845c5fde0d720cae888bf35dedd05506/packages/react-reconciler/src/ReactFiberErrorLogger.js#L78
-  const error = process.env.NODE_ENV !== 'production' ? args[1] : args[0]
-  storeHydrationErrorStateFromConsoleArgs(...args)
+  const error = args[0]
+  const errorArgs = storeHydrationErrorStateFromConsoleArgs(...args)
   handleError(error)
-  origConsoleError.apply(window.console, args)
+  origConsoleError.apply(window.console, errorArgs)
 }
 
 function onUnhandledError(event: ErrorEvent) {

test/development/acceptance/hydration-error-react-19.test.ts

@@ -4,7 +4,8 @@ import { FileRef, nextTestSetup } from 'e2e-utils'
 import { outdent } from 'outdent'
 import path from 'path'
 
-describe('Error overlay for hydration errors (React 19)', () => {
+// TODO: Enable once React 19 support is added to pages.
+describe.skip('Error overlay for hydration errors (React 19)', () => {
   const { next } = nextTestSetup({
     files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
     skipStart: true,

test/development/acceptance/hydration-error.test.ts

@@ -4,8 +4,7 @@ import { FileRef, nextTestSetup } from 'e2e-utils'
 import { outdent } from 'outdent'
 import path from 'path'
 
-// TODO: Enable this test once react 18 is supported for pages router
-describe.skip('Error overlay for hydration errors (React 18)', () => {
+describe('Error overlay for hydration errors (React 18)', () => {
   const { next } = nextTestSetup({
     files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
     dependencies: {
@@ -38,7 +37,7 @@ describe.skip('Error overlay for hydration errors (React 18)', () => {
     await session.assertHasRedbox()
 
     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(`
-      "Error: Text content does not match server-rendered HTML.
+      "Text content does not match server-rendered HTML.
       See more info here: https://nextjs.org/docs/messages/react-hydration-error"
     `)
 

test/development/basic/hmr.test.ts

@@ -18,6 +18,8 @@ import { NextInstance } from 'e2e-utils'
 import { outdent } from 'outdent'
 import type { NextConfig } from 'next'
 
+const isReact18 = true
+
 describe.each([
   { basePath: '', assetPrefix: '' },
   { basePath: '', assetPrefix: '/asset-prefix' },
@@ -41,11 +43,14 @@ describe.each([
     })
     await retry(async () => {
       const logs = await browser.log()
+
       expect(logs).toEqual(
         expect.arrayContaining([
           {
             message: expect.stringContaining(
-              'https://react.dev/link/hydration-mismatch'
+              isReact18
+                ? 'https://nextjs.org/docs/messages/react-hydration-error'
+                : 'https://react.dev/link/hydration-mismatch'
             ),
             source: 'error',
           },

test/integration/auto-export/test/index.test.js

@@ -15,6 +15,8 @@ const appDir = path.join(__dirname, '..')
 let appPort
 let app
 
+const isReact18 = true
+
 const runTests = () => {
   it('Supports commonjs 1', async () => {
     const browser = await webdriver(appPort, '/commonjs1')
@@ -99,7 +101,19 @@ describe('Auto Export', () => {
         expect.arrayContaining([
           {
             message: expect.stringContaining(
-              'https://react.dev/link/hydration-mismatch'
+              'See more info here: https://nextjs.org/docs/messages/react-hydration-error'
+            ),
+            source: 'error',
+          },
+        ])
+      )
+      expect(logs).toEqual(
+        expect.arrayContaining([
+          {
+            message: expect.stringContaining(
+              isReact18
+                ? 'https://nextjs.org/docs/messages/react-hydration-error'
+                : 'https://react.dev/link/hydration-mismatch'
             ),
             source: 'error',
           },

test/production/pages-dir/production/test/index.test.ts

@@ -29,6 +29,8 @@ if (process.env.TEST_WASM) {
   jest.setTimeout(120 * 1000)
 }
 
+const isReact18 = true
+
 describe('Production Usage', () => {
   const { next } = nextTestSetup({
     files: path.join(__dirname, '../fixture'),
@@ -181,7 +183,9 @@ describe('Production Usage', () => {
           /webpack-runtime\.js/,
           /node_modules\/react\/index\.js/,
           /node_modules\/react\/package\.json/,
-          /node_modules\/react\/cjs\/react\.production\.js/,
+          isReact18
+            ? /node_modules\/react\/cjs\/react\.production\.min\.js/
+            : /node_modules\/react\/cjs\/react\.production\.js/,
         ],
         notTests: [/\0/, /\?/, /!/],
       },
@@ -192,7 +196,9 @@ describe('Production Usage', () => {
           /chunks\/.*?\.js/,
           /node_modules\/react\/index\.js/,
           /node_modules\/react\/package\.json/,
-          /node_modules\/react\/cjs\/react\.production\.js/,
+          isReact18
+            ? /node_modules\/react\/cjs\/react\.production\.min\.js/
+            : /node_modules\/react\/cjs\/react\.production\.js/,
           /node_modules\/next/,
         ],
         notTests: [/\0/, /\?/, /!/],
@@ -204,7 +210,9 @@ describe('Production Usage', () => {
           /chunks\/.*?\.js/,
           /node_modules\/react\/index\.js/,
           /node_modules\/react\/package\.json/,
-          /node_modules\/react\/cjs\/react\.production\.js/,
+          isReact18
+            ? /node_modules\/react\/cjs\/react\.production\.min\.js/
+            : /node_modules\/react\/cjs\/react\.production\.js/,
           /node_modules\/next/,
           /node_modules\/nanoid\/index\.js/,
           /node_modules\/nanoid\/url-alphabet\/index\.js/,
@@ -219,7 +227,9 @@ describe('Production Usage', () => {
           /chunks\/.*?\.js/,
           /node_modules\/react\/index\.js/,
           /node_modules\/react\/package\.json/,
-          /node_modules\/react\/cjs\/react\.production\.js/,
+          isReact18
+            ? /node_modules\/react\/cjs\/react\.production\.min\.js/
+            : /node_modules\/react\/cjs\/react\.production\.js/,
           /node_modules\/next/,
         ],
         notTests: [