Open lelabo-m opened 1 year ago
I was having the exact same issue and can confirm that adding <head>
to the root layout fixed it.
@tmilewski thanks :) to be noted, still need to put an empty <head>
tag in the root layout even if the head.tsx
file exists... 🤷
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...
also removing the <head>
tag while using a head.js/ts
file will cause a layout shift, due to missing/broken styles
Verify 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 yourRootLayout
, using aheader
tag in any page (even when ahead.tsx
is present) will result in the hydration error below.The error seems to be related to React Dev Tool extension.
Expected Behavior
I expected:
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
<head>
tag inlayout.tsx
.page.tsx
or component: