diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index c1c00608dc5fb..8d314577f4584 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -452,21 +452,30 @@ export class Head extends Component<
makeStylesheetInert(node: ReactNode): ReactNode[] {
return React.Children.map(node, (c: any) => {
if (
- c.type === 'link' &&
- c.props['href'] &&
+ c?.type === 'link' &&
+ c?.props?.href &&
OPTIMIZED_FONT_PROVIDERS.some(({ url }) =>
- c.props['href'].startsWith(url)
+ c?.props?.href?.startsWith(url)
)
) {
- const newProps = { ...(c.props || {}) }
- newProps['data-href'] = newProps['href']
- newProps['href'] = undefined
+ const newProps = {
+ ...(c.props || {}),
+ 'data-href': c.props.href,
+ href: undefined,
+ }
+
+ return React.cloneElement(c, newProps)
+ } else if (c?.props?.children) {
+ const newProps = {
+ ...(c.props || {}),
+ children: this.makeStylesheetInert(c.props.children),
+ }
+
return React.cloneElement(c, newProps)
- } else if (c.props && c.props['children']) {
- c.props['children'] = this.makeStylesheetInert(c.props['children'])
}
+
return c
- })
+ }).filter(Boolean)
}
render() {
diff --git a/test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/_document.js b/test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/_document.js
new file mode 100644
index 0000000000000..34851fcae15cb
--- /dev/null
+++ b/test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/_document.js
@@ -0,0 +1,36 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+ static async getInitialProps(ctx) {
+ const initialProps = await Document.getInitialProps(ctx)
+ return { ...initialProps }
+ }
+
+ render() {
+ return (
+
+
+ <>
+ {false && }
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
+
+export default MyDocument
diff --git a/test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/index.js b/test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/index.js
new file mode 100644
index 0000000000000..136175234f558
--- /dev/null
+++ b/test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/index.js
@@ -0,0 +1,8 @@
+export default function Home() {
+ return (
+
+ Falsey values contained in an element contained in Head should not result
+ in an error!
+
+ )
+}
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index a4d6f216f65a3..f4a4bdd18c6b4 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -328,4 +328,10 @@ describe('Font Optimization', () => {
const { code } = await nextBuild(appDir)
expect(code).toBe(0)
})
+
+ test('makeStylesheetInert regression', async () => {
+ const appDir = join(fixturesDir, 'make-stylesheet-inert-regression')
+ const { code } = await nextBuild(appDir)
+ expect(code).toBe(0)
+ })
})