fix(#39993): avoid race condition for next/script onReady

packages/next/client/script.tsx

@@ -61,6 +61,9 @@ const loadScript = (props: ScriptProps): void => {
 
   const loadPromise = new Promise<void>((resolve, reject) => {
     el.addEventListener('load', function (e) {
+      // add cacheKey to LoadCache when load successfully
+      LoadCache.add(cacheKey)
+
       resolve()
       if (onLoad) {
         onLoad.call(this, e)
@@ -82,19 +85,26 @@ const loadScript = (props: ScriptProps): void => {
   if (src) {
     ScriptCache.set(src, loadPromise)
   }
-  LoadCache.add(cacheKey)
 
   if (dangerouslySetInnerHTML) {
     el.innerHTML = dangerouslySetInnerHTML.__html || ''
+
+    // add cacheKey to LoadCache for inline script
+    LoadCache.add(cacheKey)
   } else if (children) {
     el.textContent =
       typeof children === 'string'
         ? children
         : Array.isArray(children)
         ? children.join('')
         : ''
+
+    // add cacheKey to LoadCache for inline script
+    LoadCache.add(cacheKey)
   } else if (src) {
     el.src = src
+    // do not add cacheKey into LoadCache for remote script here
+    // cacheKey will be added to LoadCache when it is actually loaded (see loadPromise above)
   }
 
   for (const [k, value] of Object.entries(props)) {

test/integration/script-loader/base/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}

test/integration/script-loader/base/pages/page10.js

@@ -0,0 +1,31 @@
+import Script from 'next/script'
+import Link from 'next/link'
+
+if (typeof window !== 'undefined') {
+  window.remoteScriptsOnReadyCalls ??= 0
+  window.inlineScriptsOnReadyCalls ??= 0
+}
+
+const Page = () => {
+  return (
+    <div className="container">
+      <Link href="/page9">Page 9</Link>
+      <div id="text"></div>
+      <Script
+        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
+        onReady={() => {
+          window.remoteScriptsOnReadyCalls++
+        }}
+      />
+      <Script
+        id="i-am-an-inline-script-that-has-on-ready"
+        dangerouslySetInnerHTML={{ __html: 'console.log("inline script!")' }}
+        onReady={() => {
+          window.inlineScriptsOnReadyCalls++
+        }}
+      />
+    </div>
+  )
+}
+
+export default Page

test/integration/script-loader/test/index.test.js

@@ -8,6 +8,9 @@ import {
   stopApp,
   nextBuild,
   waitFor,
+  findPort,
+  launchApp,
+  killApp,
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
 import cheerio from 'cheerio'
@@ -214,6 +217,28 @@ describe('Next.js Script - Primary Strategies', () => {
     }
   })
 
+  // https://github.com/vercel/next.js/issues/39993
+  it('onReady should only fires once after load event in dev mode (issue #39993)', async () => {
+    let browser
+    // we will start a dedicated dev server for this test case only (scoped)
+    let devAppPort
+    let devApp
+
+    try {
+      devAppPort = await findPort()
+      devApp = await launchApp(appDir, devAppPort)
+      browser = await webdriver(devAppPort, '/page10')
+
+      // wait for jQuery to be loaded
+      await waitFor(1000)
+      expect(await browser.eval(`window.remoteScriptsOnReadyCalls`)).toBe(1)
+      expect(await browser.eval(`window.inlineScriptsOnReadyCalls`)).toBe(1)
+    } finally {
+      if (browser) await browser.close()
+      if (devApp) await killApp(devApp)
+    }
+  })
+
   it('priority beforeInteractive with inline script', async () => {
     const html = await renderViaHTTP(appPort, '/page5')
     const $ = cheerio.load(html)