Misleading "next-head-count is missing" error for invalid head tags
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
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 unhelpful next-head-count is missing error and the content of next/head ends up in the body tag.
Example:
<Head>
{/* The following line causes an error */}
<html lang="en" />
<title>Demo Page</title>
</Head>
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 the title tag was written into the HTML body.
Remove line 6 in components/SEO.tsx and the error will disappear:
<html lang="en" />
More extensive discussion of this error can be found here: https://github.com/vercel/next.js/issues/19361
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Run the linked reproduction with yarn dev, then inspect the next/head entry point and the components/SEO.tsx example containing <html lang="en" />. Confirm the misleading error and body placement, then verify that invalid head tags produce a warning, are ignored, and do not prevent valid head content from being handled correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 65/100