feat(eslint-plugin): add no-unallowed-tags-in-head rule#94081
Open
AliMahmoudDev wants to merge 3 commits into
Open
feat(eslint-plugin): add no-unallowed-tags-in-head rule#94081AliMahmoudDev wants to merge 3 commits into
AliMahmoudDev wants to merge 3 commits into
Conversation
When invalid HTML elements like <html>, <body>, <div>, etc. are used inside next/head, the browser silently moves them to <body>, causing all subsequent head tags to be displaced. This previously resulted in the misleading 'next-head-count is missing' error. This new ESLint rule detects and warns about invalid HTML tags used as children of the <Head> component from next/head, providing a clear and actionable error message at lint time. Only tags valid inside HTML <head> are allowed: title, meta, link, style, script, base, noscript, and template. Custom React components (PascalCase) and React.Fragment are allowed. Fixes vercel#20924
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
…horthand - Use 'JSXIdentifier' AST node type instead of 'Identifier' for JSX tag name checks. In the ESTree AST used by ESLint, JSX tag names have type 'JSXIdentifier', not 'Identifier'. - Move JSXFragment shorthand (<>...</>) handling outside of the JSXElement check so that fragments are properly traversed and their children are checked for invalid tags. - Keep named Fragment (<Fragment>, <React.Fragment>) handling inside JSXElement since those have a JSXIdentifier name.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
What?
Adds a new ESLint rule
no-unallowed-tags-in-headthat detects and warns when invalid HTML elements (e.g.,<html>,<body>,<div>,<main>,<section>) are used as children of<Head>fromnext/head.This prevents the misleading
"next-head-count is missing"error at its root cause by catching invalid tags at lint time.Before (runtime error):
After (lint warning):
Why?
When invalid HTML elements are placed inside
<Head>, the browser silently moves them (and all subsequent content) from<head>to<body>. This causes thenext-head-countmeta tag to be displaced, resulting in a confusing error message that does not point to the actual cause. Issue: #20924As suggested by @timneutkens, this should be an ESLint rule rather than a runtime fix.
How?
packages/eslint-plugin-next/src/rules/no-unallowed-tags-in-head.tspackages/eslint-plugin-next/src/index.ts(added to recommended)test/unit/eslint-plugin-next/no-unallowed-tags-in-head.test.tserrors/no-unallowed-tags-in-head.mdxThe rule:
next/headis imported (avoids false positives)React.Fragmentwrapping (1 level deep, matching Next.js behavior)<head>tag setwarnin the recommended configFixes #20924