archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Jiachi Liu 2024-06-20 16:09:19 +02:00 committed by GitHub
parent fc382a91db
commit 3a17d4d2cd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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.',

30
test/development/acceptance-app/hydration-error.test.ts
View file

@ -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()
})