From 5491d12ea9cf2480ac205bf070e26d4c951322f9 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Mon, 9 Aug 2021 15:19:13 -0700
Subject: [PATCH 1/6] Fix #27747

---
 packages/next/client/script.tsx                   | 15 ++++++++-------
 test/integration/script-loader/pages/page3.js     |  8 ++++++++
 test/integration/script-loader/test/index.test.js |  4 ++++
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/next/client/script.tsx b/packages/next/client/script.tsx
index 8968f0e77b19856..0a286de15e3fb03 100644
--- a/packages/next/client/script.tsx
+++ b/packages/next/client/script.tsx
@@ -56,18 +56,19 @@ const loadScript = (props: ScriptProps): void => {
   const el = document.createElement('script')
 
   const loadPromise = new Promise<void>((resolve, reject) => {
-    el.addEventListener('load', function () {
+    el.addEventListener('load', function (e) {
       resolve()
       if (onLoad) {
-        onLoad.call(this)
+        onLoad.call(this, e)
       }
     })
-    el.addEventListener('error', function () {
-      reject()
-      if (onError) {
-        onError()
-      }
+    el.addEventListener('error', function (e) {
+      reject(e)
     })
+  }).catch(function (e) {
+    if (onError) {
+      onError(e)
+    }
   })
 
   if (src) {
diff --git a/test/integration/script-loader/pages/page3.js b/test/integration/script-loader/pages/page3.js
index 8da988ec5077993..601ad60d0cde5f5 100644
--- a/test/integration/script-loader/pages/page3.js
+++ b/test/integration/script-loader/pages/page3.js
@@ -15,6 +15,14 @@ const Page = () => {
         src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptLazyOnload"
         strategy="lazyOnload"
       ></Script>
+      <Script
+        src="https://somebrokenlink.doesntexist"
+        strategy="lazyOnload"
+        onError={(e) => {
+          console.log('error');
+          console.log(e);
+        }}
+      />
       <div>page3</div>
     </div>
   )
diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
index e82b4d6f8b292a2..14117128715ee83 100644
--- a/test/integration/script-loader/test/index.test.js
+++ b/test/integration/script-loader/test/index.test.js
@@ -69,6 +69,10 @@ describe('Script Loader', () => {
       await browser.waitForElementByCss('#onload-div')
       await waitFor(1000)
 
+      const logs = await browser.log('browser')
+      const filteredLogs = logs.filter((log) => !log.message.includes('Failed to load resource'))
+      expect(filteredLogs.length).toBe(0)
+
       async function test(id) {
         const script = await browser.elementById(id)
         const endScripts = await browser.elementsByCss(

From 0e5fab1685452cdc16d9c0700d23fb7c46c05795 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Tue, 10 Aug 2021 10:00:13 -0700
Subject: [PATCH 2/6] Fix lint error

---
 packages/next/client/script.tsx                   | 4 ++--
 test/integration/script-loader/pages/page3.js     | 6 +++---
 test/integration/script-loader/test/index.test.js | 4 +++-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/next/client/script.tsx b/packages/next/client/script.tsx
index 0a286de15e3fb03..782925de8c0cdca 100644
--- a/packages/next/client/script.tsx
+++ b/packages/next/client/script.tsx
@@ -10,8 +10,8 @@ const LoadCache = new Set()
 export interface ScriptProps extends ScriptHTMLAttributes<HTMLScriptElement> {
   strategy?: 'afterInteractive' | 'lazyOnload' | 'beforeInteractive'
   id?: string
-  onLoad?: () => void
-  onError?: () => void
+  onLoad?: (e: any) => void
+  onError?: (e: any) => void
   children?: React.ReactNode
 }
 
diff --git a/test/integration/script-loader/pages/page3.js b/test/integration/script-loader/pages/page3.js
index 601ad60d0cde5f5..7a8a05a9ebf69ec 100644
--- a/test/integration/script-loader/pages/page3.js
+++ b/test/integration/script-loader/pages/page3.js
@@ -16,11 +16,11 @@ const Page = () => {
         strategy="lazyOnload"
       ></Script>
       <Script
-        src="https://somebrokenlink.doesntexist"
+        src="https://example.com/doesntexist"
         strategy="lazyOnload"
         onError={(e) => {
-          console.log('error');
-          console.log(e);
+          console.log('error')
+          console.log(e)
         }}
       />
       <div>page3</div>
diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
index 14117128715ee83..3d37f1612acdc8c 100644
--- a/test/integration/script-loader/test/index.test.js
+++ b/test/integration/script-loader/test/index.test.js
@@ -70,7 +70,9 @@ describe('Script Loader', () => {
       await waitFor(1000)
 
       const logs = await browser.log('browser')
-      const filteredLogs = logs.filter((log) => !log.message.includes('Failed to load resource'))
+      const filteredLogs = logs.filter(
+        (log) => !log.message.includes('Failed to load resource')
+      )
       expect(filteredLogs.length).toBe(0)
 
       async function test(id) {

From 79245093c89404a29b5329b78ed069d009a97d6d Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Thu, 19 Aug 2021 14:27:31 -0700
Subject: [PATCH 3/6] Add data attribute to script component

---
 packages/next/client/script.tsx                   | 3 +++
 packages/next/pages/_document.tsx                 | 1 +
 test/integration/script-loader/test/index.test.js | 7 +++++++
 3 files changed, 11 insertions(+)

diff --git a/packages/next/client/script.tsx b/packages/next/client/script.tsx
index 782925de8c0cdca..bd26a8b85733705 100644
--- a/packages/next/client/script.tsx
+++ b/packages/next/client/script.tsx
@@ -35,6 +35,7 @@ const loadScript = (props: ScriptProps): void => {
     onLoad = () => {},
     dangerouslySetInnerHTML,
     children = '',
+    strategy = 'afterInteractive',
     onError,
   } = props
 
@@ -98,6 +99,8 @@ const loadScript = (props: ScriptProps): void => {
     el.setAttribute(attr, value)
   }
 
+  el.setAttribute('data-nscript', strategy)
+
   document.body.appendChild(el)
 }
 
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 5a24224197ede31..cdb4095cee8f593 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -84,6 +84,7 @@ function getPreNextScripts(context: HtmlProps, props: OriginProps) {
           key={scriptProps.src || index}
           defer={!disableOptimizedLoading}
           nonce={props.nonce}
+          data-nscript="beforeInteractive"
           crossOrigin={props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN}
         />
       )
diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
index 3d37f1612acdc8c..52c4b26dd8136ff 100644
--- a/test/integration/script-loader/test/index.test.js
+++ b/test/integration/script-loader/test/index.test.js
@@ -42,12 +42,15 @@ describe('Script Loader', () => {
 
       async function test(id) {
         const script = await browser.elementById(id)
+        const dataAttr = await script.getAttribute('data-nscript')
         const endScripts = await browser.elementsByCss(
           `#__NEXT_DATA__ ~ #${id}`
         )
 
         // Renders script tag
         expect(script).toBeDefined()
+        expect(dataAttr).toBeDefined()
+
         // Script is inserted at the end
         expect(endScripts.length).toBe(1)
       }
@@ -77,12 +80,15 @@ describe('Script Loader', () => {
 
       async function test(id) {
         const script = await browser.elementById(id)
+        const dataAttr = await script.getAttribute('data-nscript')
         const endScripts = await browser.elementsByCss(
           `#__NEXT_DATA__ ~ #${id}`
         )
 
         // Renders script tag
         expect(script).toBeDefined()
+        expect(dataAttr).toBeDefined()
+
         // Script is inserted at the end
         expect(endScripts.length).toBe(1)
       }
@@ -105,6 +111,7 @@ describe('Script Loader', () => {
 
       // Renders script tag
       expect(script.length).toBe(1)
+      expect(script.attr('data-nscript')).toBeDefined()
 
       // Script is inserted before NextScripts
       expect(

From cd0e873afd3b7a4e579a854fb63703343d2fdba0 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Mon, 23 Aug 2021 18:04:51 -0700
Subject: [PATCH 4/6] Fix #28036

---
 packages/next/client/index.tsx                    |  4 ++++
 packages/next/client/script.tsx                   |  8 ++++++--
 packages/next/shared/lib/head-manager-context.ts  |  1 +
 test/integration/script-loader/test/index.test.js | 13 +++++++++++++
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
index 26a2386dd891ac9..86bdc3f6a275b13 100644
--- a/packages/next/client/index.tsx
+++ b/packages/next/client/index.tsx
@@ -156,6 +156,7 @@ window.__NEXT_P = []
 const headManager: {
   mountedInstances: Set<unknown>
   updateHead: (head: JSX.Element[]) => void
+  getIsSsr?: () => boolean
 } = initHeadManager()
 const appElement: HTMLElement | null = document.getElementById('__next')
 
@@ -163,6 +164,9 @@ let lastRenderReject: (() => void) | null
 let webpackHMR: any
 export let router: Router
 let CachedApp: AppComponent, onPerfEntry: (metric: any) => void
+headManager.getIsSsr = () => {
+  return router.isSsr
+}
 
 class Container extends React.Component<{
   fn: (err: Error, info?: any) => void
diff --git a/packages/next/client/script.tsx b/packages/next/client/script.tsx
index bd26a8b85733705..dbfaa38abbcc02e 100644
--- a/packages/next/client/script.tsx
+++ b/packages/next/client/script.tsx
@@ -136,11 +136,12 @@ function Script(props: ScriptProps): JSX.Element | null {
     dangerouslySetInnerHTML,
     strategy = 'afterInteractive',
     onError,
+    id,
     ...restProps
   } = props
 
   // Context is available only during SSR
-  const { updateScripts, scripts } = useContext(HeadManagerContext)
+  const { updateScripts, scripts, getIsSsr } = useContext(HeadManagerContext)
 
   useEffect(() => {
     if (strategy === 'afterInteractive') {
@@ -161,7 +162,10 @@ function Script(props: ScriptProps): JSX.Element | null {
         },
       ])
       updateScripts(scripts)
-    } else {
+    } else if (getIsSsr && getIsSsr()) {
+      // Script has already loaded during SSR
+      LoadCache.add(id || src)
+    } else if (getIsSsr && !getIsSsr()) {
       loadScript(props)
     }
   }
diff --git a/packages/next/shared/lib/head-manager-context.ts b/packages/next/shared/lib/head-manager-context.ts
index 6a0c85acfbd741d..7388a1da7b09623 100644
--- a/packages/next/shared/lib/head-manager-context.ts
+++ b/packages/next/shared/lib/head-manager-context.ts
@@ -5,6 +5,7 @@ export const HeadManagerContext: React.Context<{
   mountedInstances?: any
   updateScripts?: (state: any) => void
   scripts?: any
+  getIsSsr?: () => boolean
 }> = React.createContext({})
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
index 52c4b26dd8136ff..0588f18b82abf14 100644
--- a/test/integration/script-loader/test/index.test.js
+++ b/test/integration/script-loader/test/index.test.js
@@ -127,6 +127,13 @@ describe('Script Loader', () => {
     let browser
     try {
       browser = await webdriver(appPort, '/')
+      await waitFor(1000)
+
+      // beforeInteractive scripts should load once
+      let documentBIScripts = await browser.elementsByCss(
+        '[src$="documentBeforeInteractive"]'
+      )
+      expect(documentBIScripts.length).toBe(1)
 
       await browser.waitForElementByCss('[href="/page1"]')
       await browser.click('[href="/page1"]')
@@ -136,6 +143,12 @@ describe('Script Loader', () => {
 
       const script = await browser.elementById('scriptBeforeInteractive')
 
+      // Ensure beforeInteractive script isn't duplicated on navigation
+      documentBIScripts = await browser.elementsByCss(
+        '[src$="documentBeforeInteractive"]'
+      )
+      expect(documentBIScripts.length).toBe(1)
+
       // Renders script tag
       expect(script).toBeDefined()
     } finally {

From e1002e954f5513924db9848b16e24442e18d7b41 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Tue, 24 Aug 2021 00:05:16 -0700
Subject: [PATCH 5/6] Fix tests

---
 packages/next/client/script.tsx               | 3 +--
 test/integration/script-loader/pages/page3.js | 9 ++++-----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/next/client/script.tsx b/packages/next/client/script.tsx
index dbfaa38abbcc02e..302991bf3468158 100644
--- a/packages/next/client/script.tsx
+++ b/packages/next/client/script.tsx
@@ -136,7 +136,6 @@ function Script(props: ScriptProps): JSX.Element | null {
     dangerouslySetInnerHTML,
     strategy = 'afterInteractive',
     onError,
-    id,
     ...restProps
   } = props
 
@@ -164,7 +163,7 @@ function Script(props: ScriptProps): JSX.Element | null {
       updateScripts(scripts)
     } else if (getIsSsr && getIsSsr()) {
       // Script has already loaded during SSR
-      LoadCache.add(id || src)
+      LoadCache.add(restProps.id || src)
     } else if (getIsSsr && !getIsSsr()) {
       loadScript(props)
     }
diff --git a/test/integration/script-loader/pages/page3.js b/test/integration/script-loader/pages/page3.js
index 58453214b172866..592bd84b16fea02 100644
--- a/test/integration/script-loader/pages/page3.js
+++ b/test/integration/script-loader/pages/page3.js
@@ -4,11 +4,10 @@ const Page = () => {
   return (
     <div class="container">
       <Script id="inline-script">
-        {`(window.onload = function () {
-            const newDiv = document.createElement('div')
-            newDiv.id = 'onload-div'
-            document.querySelector('body').appendChild(newDiv)
-          })`}
+        {`const newDiv = document.createElement('div')
+          newDiv.id = 'onload-div'
+          document.querySelector('body').appendChild(newDiv)
+        `}
       </Script>
       <Script
         id="scriptLazyOnload"

From 38ff970d9b0eecbf9ed860e9301ca13b09272c2c Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Tue, 24 Aug 2021 00:07:13 -0700
Subject: [PATCH 6/6] Fix tests

---
 test/integration/script-loader/test/index.test.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
index 0588f18b82abf14..271104b95a29a47 100644
--- a/test/integration/script-loader/test/index.test.js
+++ b/test/integration/script-loader/test/index.test.js
@@ -127,7 +127,6 @@ describe('Script Loader', () => {
     let browser
     try {
       browser = await webdriver(appPort, '/')
-      await waitFor(1000)
 
       // beforeInteractive scripts should load once
       let documentBIScripts = await browser.elementsByCss(
@@ -139,7 +138,6 @@ describe('Script Loader', () => {
       await browser.click('[href="/page1"]')
 
       await browser.waitForElementByCss('.container')
-      await waitFor(1000)
 
       const script = await browser.elementById('scriptBeforeInteractive')