vercel/next.js

Misleading "next-head-count is missing" error for invalid head tags

Open

#20924 opened on Jan 9, 2021

View on GitHub
 (10 comments) (11 reactions) (0 assignees)JavaScript (139,471 stars) (31,066 forks)batch import
LintingMetadatagood first issue

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

Tech stack
nextjsreactjavascriptnodejs
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Next.js basicsReact fundamentals
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the source code in the Next.js repository that handles head tag validation. Look at the function that counts head elements and generates the 'next head count is missing' error. Examine the linked issue #19361 for additional context. Propose a fix that validates tags and provides a descriptive warning for invalid tags like <html> inside <Head>.