Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Next13] Using <header> tag while no <head> tag is present cause hydration errors. #41953

Closed
1 task done
lelabo-m opened this issue Oct 27, 2022 · 6 comments
Closed
1 task done

[Next13] Using <header> tag while no <head> tag is present cause hydration errors. #41953

lelabo-m opened this issue Oct 27, 2022 · 6 comments
Labels
bug Issue was opened via the bug report template. stale The issue has not seen recent activity.

Comments

@lelabo-m
Copy link

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: linux
Arch: x64
Version: #1 SMP Mon Sep 19 19:14:52 UTC 2022
Binaries:
Node: 16.13.0
npm: 8.1.0
Yarn: N/A
pnpm: 7.14.0
Relevant packages:
next: 13.0.1-canary.0
eslint-config-next: 13.0.0
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

Opera Gx / Chrome

How are you deploying your application? (if relevant)

pnpm run dev (next dev)

Describe the Bug

If you don't have a <head> tag in your RootLayout, using a header tag in any page (even when a head.tsx is present) will result in the hydration error below.

The error seems to be related to React Dev Tool extension.

react_devtools_backend.js:4026 Warning: Did not expect server HTML to contain a <script> in <header>.
    at header
    at div
    at div
    at InnerLayoutRouter (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:116:11)
    at RedirectErrorBoundary (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:281:9)
    at RedirectBoundary (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:288:11)
    at NotFoundErrorBoundary (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:317:9)
    at NotFoundBoundary (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:324:11)
    at LoadingBoundary (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:235:11)
    at ErrorBoundary (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:40:11)
    at RenderFromTemplateContext (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:17:11)
    at div
    at div
    at div
    at body
    at html
    at ReactDevOverlay (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:53:9)
    at HotReload (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)
    at Router (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/app-router.js:73:11)
    at ErrorBoundaryHandler (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:28:9)
    at ErrorBoundary (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:40:11)
    at AppRouter
    at ServerRoot (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/app-index.js:114:11)
    at RSCComponent
    at Root (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/app-index.js:130:11)
overrideMethod @ react_devtools_backend.js:4026
print

Warning @ react-dom.development.js:94
error @ react-dom.development.js:68
warnForDeletedHydratableElement @ react-dom.development.js:10625
didNotHydrateInstance @ react-dom.development.js:13434
warnUnhydratedInstance @ react-dom.development.js:14443
warnIfUnhydratedTailNodes @ react-dom.development.js:14873
popHydrationState @ react-dom.development.js:14843
completeWork @ react-dom.development.js:25195
completeUnitOfWork @ react-dom.development.js:30669
performUnitOfWork @ react-dom.development.js:30555
workLoopConcurrent @ react-dom.development.js:30530
renderRootConcurrent @ react-dom.development.js:30469
performConcurrentWorkOnRoot @ react-dom.development.js:29657
workLoop @ index.js:11
flushWork @ index.js:11
performWorkUntilDeadline @ index.js:11
react_devtools_backend.js:4026 

Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
errorHydratingContainer @ react-dom.development.js:13483
recoverFromConcurrentError @ react-dom.development.js:29767
performConcurrentWorkOnRoot @ react-dom.development.js:29670
workLoop @ index.js:11
flushWork @ index.js:11
performWorkUntilDeadline @ index.js:11
react-dom.development.js:14643

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:14643:9)
    at popHydrationState (react-dom.development.js:14844:9)
    at completeWork (react-dom.development.js:25195:31)
    at completeUnitOfWork (react-dom.development.js:30669:16)
    at performUnitOfWork (react-dom.development.js:30555:5)
    at workLoopConcurrent (react-dom.development.js:30530:5)
    at renderRootConcurrent (react-dom.development.js:30469:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:29657:38)
    at workLoop (index.js:11:3897)
    at flushWork (index.js:11:3606)
throwOnHydrationMismatch @ react-dom.development.js:14643
popHydrationState @ react-dom.development.js:14844
completeWork @ react-dom.development.js:25195
completeUnitOfWork @ react-dom.development.js:30669
performUnitOfWork @ react-dom.development.js:30555
workLoopConcurrent @ react-dom.development.js:30530
renderRootConcurrent @ react-dom.development.js:30469
performConcurrentWorkOnRoot @ react-dom.development.js:29657
workLoop @ index.js:11
flushWork @ index.js:11
performWorkUntilDeadline @ index.js:11
react-dom.development.js:14643

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:14643:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:14693:7)
    at updateHostComponent (react-dom.development.js:22707:5)
    at beginWork (react-dom.development.js:24533:14)
    at beginWork$1 (react-dom.development.js:31612:14)
    at performUnitOfWork (react-dom.development.js:30544:12)
    at workLoopConcurrent (react-dom.development.js:30530:5)
    at renderRootConcurrent (react-dom.development.js:30469:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:29657:38)
    at workLoop (index.js:11:3897)
throwOnHydrationMismatch @ react-dom.development.js:14643
tryToClaimNextHydratableInstance @ react-dom.development.js:14693
updateHostComponent @ react-dom.development.js:22707
beginWork @ react-dom.development.js:24533
beginWork$1 @ react-dom.development.js:31612
performUnitOfWork @ react-dom.development.js:30544
workLoopConcurrent @ react-dom.development.js:30530
renderRootConcurrent @ react-dom.development.js:30469
performConcurrentWorkOnRoot @ react-dom.development.js:29657
workLoop @ index.js:11
flushWork @ index.js:11
performWorkUntilDeadline @ index.js:11
2react-dom.development.js:14643

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:14643:9)
    at popHydrationState (react-dom.development.js:14844:9)
    at completeWork (react-dom.development.js:25195:31)
    at completeUnitOfWork (react-dom.development.js:30669:16)
    at performUnitOfWork (react-dom.development.js:30555:5)
    at workLoopConcurrent (react-dom.development.js:30530:5)
    at renderRootConcurrent (react-dom.development.js:30469:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:29657:38)
    at workLoop (index.js:11:3897)
    at flushWork (index.js:11:3606)
throwOnHydrationMismatch @ react-dom.development.js:14643
popHydrationState @ react-dom.development.js:14844
completeWork @ react-dom.development.js:25195
completeUnitOfWork @ react-dom.development.js:30669
performUnitOfWork @ react-dom.development.js:30555
workLoopConcurrent @ react-dom.development.js:30530
renderRootConcurrent @ react-dom.development.js:30469
performConcurrentWorkOnRoot @ react-dom.development.js:29657
workLoop @ index.js:11
flushWork @ index.js:11
performWorkUntilDeadline @ index.js:11
react-dom.development.js:14643

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:14643:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:14693:7)
    at updateHostComponent (react-dom.development.js:22707:5)
    at beginWork (react-dom.development.js:24533:14)
    at beginWork$1 (react-dom.development.js:31612:14)
    at performUnitOfWork (react-dom.development.js:30544:12)
    at workLoopConcurrent (react-dom.development.js:30530:5)
    at renderRootConcurrent (react-dom.development.js:30469:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:29657:38)
    at workLoop (index.js:11:3897)
throwOnHydrationMismatch @ react-dom.development.js:14643
tryToClaimNextHydratableInstance @ react-dom.development.js:14693
updateHostComponent @ react-dom.development.js:22707
beginWork @ react-dom.development.js:24533
beginWork$1 @ react-dom.development.js:31612
performUnitOfWork @ react-dom.development.js:30544
workLoopConcurrent @ react-dom.development.js:30530
renderRootConcurrent @ react-dom.development.js:30469
performConcurrentWorkOnRoot @ react-dom.development.js:29657
workLoop @ index.js:11
flushWork @ index.js:11
performWorkUntilDeadline @ index.js:11
react-dom.development.js:22654

Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
    at updateHostRoot (react-dom.development.js:22654:57)
    at beginWork (react-dom.development.js:24516:14)
    at beginWork$1 (react-dom.development.js:31612:14)
    at performUnitOfWork (react-dom.development.js:30544:12)
    at workLoopSync (react-dom.development.js:30429:5)
    at renderRootSync (react-dom.development.js:30382:7)
    at recoverFromConcurrentError (react-dom.development.js:29771:20)
    at performConcurrentWorkOnRoot (react-dom.development.js:29670:22)
    at workLoop (index.js:11:3897)
    at flushWork (index.js:11:3606)

Expected Behavior

I expected:

  • To be able to use any valid html tag where I want.
  • having a head.tsx file would get ride of the error.

Link to reproduction

https://github.com/vercel/next.js/tree/canary/examples/with-turbopack

To Reproduce

  • Use with-turbopack.
  • Remove the <head> tag in layout.tsx.
  • Add the following in any page.tsx or component:
<header>
Test
</header>
@lelabo-m lelabo-m added the bug Issue was opened via the bug report template. label Oct 27, 2022
@tmilewski
Copy link
Contributor

I was having the exact same issue and can confirm that adding <head> to the root layout fixed it.

@ibrahim-ahmed-dev ibrahim-ahmed-dev mentioned this issue Oct 30, 2022
Closed
11 tasks
@y-nk
Copy link

y-nk commented Oct 31, 2022

@tmilewski thanks :) to be noted, still need to put an empty <head> tag in the root layout even if the head.tsx file exists... 🤷

@lelabo-m
Copy link
Author

lelabo-m commented Nov 2, 2022

That's what I deduced but it's not clear right now in the doc that a head tag is required at anytime if you don't want to expect weird behaviors.
In fact, in worked fine until I ran into this...

@Xariwey
Copy link

Xariwey commented Nov 7, 2022 •
edited
Loading

also removing the <head> tag while using a head.js/ts file will cause a layout shift, due to missing/broken styles

@vercel-release-bot
Copy link
Collaborator

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

@vercel-release-bot vercel-release-bot added the stale The issue has not seen recent activity. label Jan 11, 2025
@nextjs-bot
Copy link
Collaborator

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!

@nextjs-bot nextjs-bot closed this as not planned Won't fix, can't repro, duplicate, stale Jan 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. stale The issue has not seen recent activity.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Prevent scripts from being injected into header
6 participants
@tmilewski @y-nk @lelabo-m @vercel-release-bot @Xariwey @nextjs-bot