Improve error messaging for invalid HTML elements in next/head #80530
+54
−1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add runtime warnings when <html> or <body> tags are used in next/head - Helps developers understand why they get 'next-head-count is missing' error - Provides clear error messages with documentation links - Add comprehensive tests for the warning functionality Fixes vercel#20924
|
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
For Contributors
Fixing a bug
fixes #numberWhat?
This PR improves the developer experience by providing clear warning messages when invalid HTML elements (
<html>or<body>) are used insidenext/head.Why?
Currently, when developers mistakenly put
<html>or<body>tags insidenext/head, they receive a confusing error message: "next-head-count is missing". This doesn't explain what they did wrong or how to fix it.How?
• Added validation logic in
packages/next/src/shared/lib/head.tsxto detect<html>and<body>elements during development• Show clear warning messages that explain the issue and link to documentation
• Added comprehensive tests to verify the warnings are displayed correctly
Changes:
• Modified:
packages/next/src/shared/lib/head.tsx- Added validation and warning logic• Added: Test case in
test/development/pages-dir/client-navigation/head.test.ts• Added: Test pages for reproducing the issue
Before:
• Confusing "next-head-count is missing" error
• No guidance on what caused the issue
After:
• Clear warning: "Do not use tags in next/head. You cannot use to set attributes on or tags. This will result in a 'next-head-count is missing' error."
• Includes link to documentation for more information
Fixes #20924
Test Plan
The implementation includes comprehensive tests that verify:
<html>tags are used innext/head<body>tags are used innext/headTests pass with the new warning system in place.