fix: bad script tag in layout hydration error (#66998)

vercel · Jun 20, 2024 · 3a17d4d · 3a17d4d
1 parent fc382a9
commit 3a17d4d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/...ges/next/src/client/components/react-dev-overlay/internal/helpers/hydration-error-info.ts b/...ges/next/src/client/components/react-dev-overlay/internal/helpers/hydration-error-info.ts
@@ -17,7 +17,6 @@ export const hydrationErrorState: HydrationErrorState = {}
 
 // https://github.com/facebook/react/blob/main/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js used as a reference
 const htmlTagsWarnings = new Set([
-  'Warning: Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag.%s',
   'Warning: In HTML, %s cannot be a child of <%s>.%s\nThis will cause a hydration error.%s',
   'Warning: In HTML, %s cannot be a descendant of <%s>.\nThis will cause a hydration error.%s',
   'Warning: In HTML, text nodes cannot be a child of <%s>.\nThis will cause a hydration error.',

diff --git a/test/development/acceptance-app/hydration-error.test.ts b/test/development/acceptance-app/hydration-error.test.ts
@@ -720,16 +720,28 @@ describe('Error overlay for hydration errors', () => {
     expect(await getRedboxTotalErrorCount(browser)).toBe(1)
 
     const description = await session.getRedboxDescription()
-    // FIXME
-    expect(description).toContain(
-      "TypeError: Cannot read properties of undefined (reading 'replace')"
-    )
+    expect(description).toEqual(outdent`
+      In HTML, <script> cannot be a child of <html>.
+      This will cause a hydration error.
+    `)
 
-    // const pseudoHtml = await session.getRedboxComponentStack()
-    // expect(pseudoHtml).toEqual(outdent`
-    //   <script>
-    //   ^^^^^^^^
-    // `)
+    const pseudoHtml = await session.getRedboxComponentStack()
+    if (isTurbopack) {
+      expect(pseudoHtml).toEqual(outdent`
+        ...
+          <Layout>
+            <html>
+            ^^^^^^
+              <Script>
+                <script>
+                ^^^^^^^^
+      `)
+    } else {
+      expect(pseudoHtml).toEqual(outdent`
+        <script>
+        ^^^^^^^^
+      `)
+    }
     await cleanup()
   })