Add script to script loader when strategy prop is undefined (#65585)

hwangstar156 · ijjk · web-flow · commit 337666bfd477 · 2024-05-14T18:28:27.000-07:00
### Fixing a bug fixes #65580 ### What? #65580 ### Why? Currently, afterInteractive is given as the default strategy prop, but afterInteractive is not set for the child retrieved through React.Children, and it is an empty prop and is not added to the script loader, so the script is not executed. ### How? Added item to script loader when `child.props.strategy` is undefined. --------- Co-authored-by: JJ Kasper <jj@jjsweb.site>
diff --git a/packages/next/src/pages/_document.tsx b/packages/next/src/pages/_document.tsx
@@ -989,6 +989,9 @@ function handleDocumentScriptLoaderItems(
       ) {
         scriptLoaderItems.push(child.props)
         return
+      } else if (typeof child.props.strategy === 'undefined') {
+        scriptLoaderItems.push({ ...child.props, strategy: 'afterInteractive' })
+        return
       }
     }
   })
diff --git a/test/e2e/next-script/index.test.ts b/test/e2e/next-script/index.test.ts
@@ -124,6 +124,125 @@ describe('beforeInteractive in document body', () => {
     }
   })
 })
+
+describe('empty strategy in document Head', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/_document.js': `
+          import { Html, Head, Main, NextScript } from 'next/document'
+          import Script from 'next/script'
+
+          export default function Document() {
+            return (
+              <Html>
+                <Head>
+                  <Script
+                    src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
+                  ></Script>
+                </Head>
+                <body>
+                  <Main />
+                  <NextScript />
+                </body>
+              </Html>
+            )
+          }
+        `,
+        'pages/index.js': `
+          export default function Home() {
+            return (
+              <>
+                <p>Home page</p>
+              </>
+            )
+          }
+        `,
+      },
+      dependencies: {
+        react: '19.0.0-beta-4508873393-20240430',
+        'react-dom': '19.0.0-beta-4508873393-20240430',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('Script is injected server-side', async () => {
+    let browser: BrowserInterface
+
+    try {
+      browser = await webdriver(next.url, '/')
+
+      const script = await browser.eval(
+        `document.querySelector('script[data-nscript="afterInteractive"]')`
+      )
+      expect(script).not.toBeNull()
+    } finally {
+      if (browser) await browser.close()
+    }
+  })
+})
+
+describe('empty strategy in document body', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/_document.js': `
+          import { Html, Head, Main, NextScript } from 'next/document'
+          import Script from 'next/script'
+
+          export default function Document() {
+            return (
+              <Html>
+                <Head/>
+                <body>
+                  <Main />
+                  <NextScript />
+                  <Script
+                    src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
+                  />
+                </body>
+              </Html>
+            )
+          }
+        `,
+        'pages/index.js': `
+          export default function Home() {
+            return (
+              <>
+                <p>Home page</p>
+              </>
+            )
+          }
+        `,
+      },
+      dependencies: {
+        react: '19.0.0-beta-4508873393-20240430',
+        'react-dom': '19.0.0-beta-4508873393-20240430',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('Script is injected server-side', async () => {
+    let browser: BrowserInterface
+
+    try {
+      browser = await webdriver(next.url, '/')
+
+      const script = await browser.eval(
+        `document.querySelector('script[data-nscript="afterInteractive"]')`
+      )
+      expect(script).not.toBeNull()
+    } finally {
+      if (browser) await browser.close()
+    }
+  })
+})
 ;(process.env.TURBOPACK ? describe.skip : describe)(
   'experimental.nextScriptWorkers',
   () => {

Original file line number	Diff line number	Diff line change
`@@ -989,6 +989,9 @@ function handleDocumentScriptLoaderItems(`
`989`	`989`	`) {`
`990`	`990`	`scriptLoaderItems.push(child.props)`
`991`	`991`	`return`
	`992`	`+ } else if (typeof child.props.strategy === 'undefined') {`
	`993`	`+ scriptLoaderItems.push({ ...child.props, strategy: 'afterInteractive' })`
	`994`	`+ return`
`992`	`995`	`}`
`993`	`996`	`}`
`994`	`997`	`})`