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

…ercel#34021) In vercel#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.
natew · Feb 16, 2022 · e3e80a9 · e3e80a9
1 parent ee3ae28
commit e3e80a9
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 {