diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 923651e172910..245e7675f31a8 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -368,6 +368,14 @@ export class Head extends Component<
let children = this.props.children
// show a warning if Head contains (only in development)
if (process.env.NODE_ENV !== 'production') {
+ const allowedHeadChildren = new Set([
+ 'base',
+ 'link',
+ 'style',
+ 'script',
+ 'noscript',
+ 'template',
+ ])
children = React.Children.map(children, (child: any) => {
const isReactHelmet = child?.props?.['data-react-helmet']
if (!isReactHelmet) {
@@ -382,6 +390,10 @@ export class Head extends Component<
console.warn(
"Warning: viewport meta tags should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-viewport-meta"
)
+ } else if (!allowedHeadChildren.has(child?.type)) {
+ console.warn(
+ `Warning: elements of type ${child?.type} should not be used in _document.js's <Head>.`
+ )
}
}
return child
diff --git a/test/integration/document-head-warnings/pages/_document.js b/test/integration/document-head-warnings/pages/_document.js
index 8c94d830bb60b..bb51a280fbe38 100644
--- a/test/integration/document-head-warnings/pages/_document.js
+++ b/test/integration/document-head-warnings/pages/_document.js
@@ -7,6 +7,7 @@ class MyDocument extends Document {
<Head crossOrigin="anonymous">
<title>Check out this title!
+
diff --git a/test/integration/document-head-warnings/test/index.test.js b/test/integration/document-head-warnings/test/index.test.js
index dfb6051d59ccb..9675797560e92 100644
--- a/test/integration/document-head-warnings/test/index.test.js
+++ b/test/integration/document-head-warnings/test/index.test.js
@@ -39,5 +39,11 @@ describe('Custom Document Head Warnings', () => {
/.*Warning: `Head` attribute `crossOrigin` is deprecated\..*/
)
})
+
+ it('warns when using an invalid tag in document/head', () => {
+ expect(output).toMatch(
+ /.*Warning: elements of type svg should not be used in _document.js's \..*/
+ )
+ })
})
})