Fixes issue with makeStylesheetInert (vercel#32027)

Fixes vercel#32024 Fixing makeStylesheetInert. Fixes log import. ## Bug - [x] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint` Co-authored-by: Devin Wall <87490815+DevinWallKcl@users.noreply.github.com>
natew · Feb 16, 2022 · a1af94e · a1af94e
1 parent bdbc6c7
commit a1af94e
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 9 deletions.
diff --git 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/...ntegration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/_document.js b/...ntegration/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 (
+      <Html>
+        <Head>
+          <>
+            {false && <script data-href="test"></script>}
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link
+              rel="preconnect"
+              href="https://fonts.gstatic.com"
+              crossOrigin
+            />
+            <link
+              href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
+              rel="stylesheet"
+            />
+          </>
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+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
@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <h1>
+      Falsey values contained in an element contained in Head should not result
+      in an error!
+    </h1>
+  )
+}
diff --git 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)
+  })
 })