-
Notifications
You must be signed in to change notification settings - Fork 27.2k
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.
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
Misleading "next-head-count is missing" error for invalid head tags #20924
Comments
Same happened to us in another component
This is used in the component from nextjs |
Next.js's head count error may be caused by either literally wrong head count or using a tag within the Head which is not allowed. (For the other discussions you have m
HTML tag is not allowed within the Head component because during the render, Next.js places the Head component directly within the html tag where it belongs. As a result when you type a html element within the Head component it causes error and because of this error, Head component does not deliver the data while Next.js expects a Head data, it does not receive and you see a head count error. You may try to create a custom document and place the lang attribute in there. Here is the example of what happens to the rendered head element when you use an illegal element. |
Had this happen and it took quite a while to figure out. A clearer warning as proposed would have been great. I was migrating a project from Gatsby to Next.js. In that migration I switched from react-helmet to next/head. To improve accessibility |
While reviewing a SEO warning in Lighthouse I noticed that the <head> tags did not appear in the <head> but instead at the top in <body>. After some looking around it seems that specifying `<html lang="is">` in next/head <Head> is not supported. It was supported in react-helmet which was used previously. A mistake I was not careful enough to spot while migrating from react-helmet to next/head. This also fixes a next-head-count warning on the console. After some further digging it seems this is a known issue[0] with a proposed fix[1]. Since the website will only ever be in Icelandic it is enough to specify a i18n locale setting. That will then set the correct <html> lang attribute. See: [0]: vercel/next.js#20924 [1]: vercel/next.js#21080
It happened to me as well but in our case it was due to a user-provided snippet that included a Here's the lines of code where it happens: next.js/packages/next/client/head-manager.ts Lines 45 to 47 in 6ad9172
It's worth noting that it's not Next.js that places the invalid HTML in the Since the browser seems to move everything that's after the invalid tag a potential solution for this would be to move the |
This can now be an ESLint rule I believe |
This is also triggered when you accidentally nested Head elements, one inside another. |
Related issue #50944, I think an uncaught error is happening in production breaking the page, probably page should be allowed to render like hydration errors. Not sure the reason of hard dependency of need of next-head-count at framework level that framework throws runtime error breaking the complete page. Unfortunately control also doesn't goes to _error file to handle it gracefully. |
What version of Next.js are you using?
10.0.5
What version of Node.js are you using?
12.20.1
What browser are you using?
Chrome
What operating system are you using?
macOS
How are you deploying your application?
Vercel
Describe the Bug
When using an unsupported/invalid tag in
next/head
, the console shows an unhelpfulnext-head-count is missing
error and the content ofnext/head
ends up in thebody
tag.Example:
Expected Behavior
Next.js should warn about the offending tag and gracefully ignore it.
To Reproduce
https://github.com/aengl/next-head-count-missing
Check out the project, run it via
yarn dev
and check the console output on the index page to see the error. Check the inspector to verify that thetitle
tag was written into the HTML body.Remove line 6 in
components/SEO.tsx
and the error will disappear:More extensive discussion of this error can be found here: #19361
The text was updated successfully, but these errors were encountered: