Do not warn when application/ld+json scripts are used with next/head

In #33968, a warning was added for script tags inserted through the next/head component. This change unintentionally included application/ld+json scripts, which shouldn't be triggering the warnings (as they were originally intended to catch scripts where loading order or timing could be important). This change adds an exception for application/ld+json scripts, so they do not log the warning if they are included through next/head.
vercel · Feb 5, 2022 · 9c0e4fc · 9c0e4fc
1 parent 1aeb230
commit 9c0e4fc
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/packages/next/shared/lib/head.tsx b/packages/next/shared/lib/head.tsx
@@ -162,7 +162,8 @@ function reduceComponents(
         }
       }
       if (process.env.NODE_ENV === 'development') {
-        if (c.type === 'script') {
+        // omit JSON-LD structured data snippets from the warning
+        if (c.type === 'script' && c.props['type'] !== 'application/ld+json') {
           const srcMessage = c.props['src']
             ? `<script> tag with src="${c.props['src']}"`
             : `inline <script>`

diff --git a/test/integration/client-navigation/pages/head-with-json-ld-snippet.js b/test/integration/client-navigation/pages/head-with-json-ld-snippet.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import Head from 'next/head'
+
+export default () => (
+  <div>
+    <Head>
+      {/* this should not cause a warning */}
+      <script type="application/ld+json"></script>
+    </Head>
+    <h1>I can have meta tags</h1>
+  </div>
+)
diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js
@@ -1414,6 +1414,29 @@ describe('Client Navigation', () => {
       }
     })
 
+    it('should not warn when application/ld+json scripts are in head', async () => {
+      let browser
+      try {
+        browser = await webdriver(context.appPort, '/head-with-json-ld-snippet')
+
+        await browser.waitForElementByCss('h1')
+        await waitFor(2000)
+        const browserLogs = await browser.log('browser')
+        let found = false
+        browserLogs.forEach((log) => {
+          console.log('log.message', log.message)
+          if (log.message.includes('Use next/script instead')) {
+            found = true
+          }
+        })
+        expect(found).toEqual(false)
+      } finally {
+        if (browser) {
+          await browser.close()
+        }
+      }
+    })
+
     it('should warn when stylesheets are in head', async () => {
       let browser
       try {