fix(error-overlay): matching html tag with brackets in hydration error

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

@@ -73,7 +73,10 @@ export function PseudoHtmlDiff({
   const [isHtmlCollapsed, toggleCollapseHtml] = useState(shouldCollapse)
 
   const htmlComponents = useMemo(() => {
-    const tagNames = isHtmlTagsWarning ? [firstContent, secondContent] : []
+    const tagNames = isHtmlTagsWarning
+      ? // tags could have < or > in the name, so we always remove them to match
+        [firstContent.replace(/<|>/g, ''), secondContent.replace(/<|>/g, '')]
+      : []
     const nestedHtmlStack: React.ReactNode[] = []
     let lastText = ''
 

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

@@ -216,6 +216,6 @@ export const styles = css`
     font-size: 0;
   }
   [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {
-    color: var(--color-accents-3);
+    color: var(--color-accents-1);
   }
 `

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

@@ -19,10 +19,9 @@ export const getHydrationWarningType = (
 const isHtmlTagsWarning = (msg: NullableText) =>
   Boolean(msg && htmlTagsWarnings.has(msg))
 
-const isTextMismatchWarning = (msg: NullableText) =>
-  Boolean(msg && textMismatchWarnings.has(msg))
+const isTextMismatchWarning = (msg: NullableText) => textMismatchWarning === msg
 const isTextInTagsMismatchWarning = (msg: NullableText) =>
-  Boolean(msg && textInTagsMismatchWarnings.has(msg))
+  Boolean(msg && textAndTagsMismatchWarnings.has(msg))
 
 const isKnownHydrationWarning = (msg: NullableText) =>
   isHtmlTagsWarning(msg) ||
@@ -37,13 +36,12 @@ const htmlTagsWarnings = new Set([
   'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
   'Warning: Did not expect server HTML to contain a <%s> in <%s>.%s',
 ])
-const textInTagsMismatchWarnings = new Set([
+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',
 ])
-const textMismatchWarnings = new Set([
-  'Warning: Text content did not match. Server: "%s" Client: "%s"%s',
-])
+const textMismatchWarning =
+  'Warning: Text content did not match. Server: "%s" Client: "%s"%s'
 
 /**
  * Patch console.error to capture hydration errors.

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

@@ -349,7 +349,7 @@ describe('Error overlay for hydration errors', () => {
     await cleanup()
   })
 
-  it('should only show one hydration error when bad nesting happened', async () => {
+  it('should only show one hydration error when bad nesting happened - p under p', async () => {
     const { cleanup, session, browser } = await sandbox(
       next,
       new Map([
@@ -412,6 +412,69 @@ describe('Error overlay for hydration errors', () => {
     await cleanup()
   })
 
+  it('should only show one hydration error when bad nesting happened - div under p', async () => {
+    const { cleanup, session, browser } = await sandbox(
+      next,
+      new Map([
+        [
+          'app/page.js',
+          outdent`
+            'use client'
+
+            export default function Page() {
+              return (
+                <p>
+                  <div>Nested div under p tag</div>
+                </p>
+              )
+            }
+          `,
+        ],
+      ])
+    )
+
+    await session.waitForAndOpenRuntimeError()
+    expect(await session.hasRedbox()).toBe(true)
+
+    const totalErrorCount = await browser
+      .elementByCss('[data-nextjs-dialog-header-total-count]')
+      .text()
+    expect(totalErrorCount).toBe('1')
+
+    const description = await session.getRedboxDescription()
+    expect(description).toContain(
+      'Error: Hydration failed because the initial UI does not match what was rendered on the server.'
+    )
+    const warning = await session.getRedboxDescriptionWarning()
+    expect(warning).toContain(
+      'In HTML, <div> cannot be a descendant of <p>.\nThis will cause a hydration error.'
+    )
+
+    const pseudoHtml = await session.getRedboxComponentStack()
+
+    // Turbopack currently has longer component stack trace
+    if (isTurbopack) {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "...
+          <Page>
+            <p>
+            ^^^
+              <div>
+              ^^^^^"
+      `)
+    } else {
+      expect(pseudoHtml).toMatchInlineSnapshot(`
+        "<Page>
+          <p>
+          ^^^
+            <div>
+            ^^^^^"
+      `)
+    }
+
+    await cleanup()
+  })
+
   it('should show the highlighted bad nesting html snippet when bad nesting happened', async () => {
     const { cleanup, session } = await sandbox(
       next,