From 37a09891f38dd161b3bb8be9c7a14cd76f771f59 Mon Sep 17 00:00:00 2001
From: Zane Bauman <zanebauman55@gmail.com>
Date: Wed, 3 Jan 2024 14:48:55 -0500
Subject: [PATCH] fix: `<Script>` with `beforeInteractive` strategy ignores
 additional attributes in App Router (#59779)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### What?

Currently, `next/script` in the App Router does not behave as the docs
describe in the [Additional
Attributes](https://nextjs.org/docs/app/building-your-application/optimizing/scripts#additional-attributes)
section – it does not pass on all additional attributes when
`strategy="beforeInteractive"`
([#49830](https://github.com/vercel/next.js/issues/49830)).

### Why?

The props from the `<Script>` component were not passed on to the
underlying script loader (`self.__next_s`).

### How?

I've added the missing props to the object that is `push`ed to
`self.__next_s`.

NEXT-1304
Fixes #49830
---
 packages/next/src/client/script.tsx      |  3 ++-
 test/e2e/app-dir/app/app/script/page.js  | 16 ++++++++++++++++
 test/e2e/app-dir/app/index.test.ts       | 20 ++++++++++++++++++++
 test/e2e/app-dir/app/public/noop-test.js |  1 +
 4 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 test/e2e/app-dir/app/public/noop-test.js

diff --git a/packages/next/src/client/script.tsx b/packages/next/src/client/script.tsx
index 9fe128aba41e1..1d1390a608fb6 100644
--- a/packages/next/src/client/script.tsx
+++ b/packages/next/src/client/script.tsx
@@ -334,7 +334,7 @@ function Script(props: ScriptProps): JSX.Element | null {
             dangerouslySetInnerHTML={{
               __html: `(self.__next_s=self.__next_s||[]).push(${JSON.stringify([
                 0,
-                { ...restProps },
+                { ...restProps, id },
               ])})`,
             }}
           />
@@ -353,6 +353,7 @@ function Script(props: ScriptProps): JSX.Element | null {
             dangerouslySetInnerHTML={{
               __html: `(self.__next_s=self.__next_s||[]).push(${JSON.stringify([
                 src,
+                { ...restProps, id },
               ])})`,
             }}
           />
diff --git a/test/e2e/app-dir/app/app/script/page.js b/test/e2e/app-dir/app/app/script/page.js
index 3513c647b6041..28820d7a2c055 100644
--- a/test/e2e/app-dir/app/app/script/page.js
+++ b/test/e2e/app-dir/app/app/script/page.js
@@ -33,6 +33,22 @@ export default function Page() {
         `,
         }}
       />
+      <Script
+        strategy="beforeInteractive"
+        src="/noop-test.js"
+        id="script-with-src-noop-test"
+        data-extra-prop="script-with-src"
+      />
+      <Script
+        strategy="beforeInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+        console.log('noop-test-dangerouslySetInnerHTML')
+        `,
+        }}
+        id="script-without-src-noop-test-dangerouslySetInnerHTML"
+        data-extra-prop="script-without-src"
+      />
     </div>
   )
 }
diff --git a/test/e2e/app-dir/app/index.test.ts b/test/e2e/app-dir/app/index.test.ts
index 9cd8f8b93f6b6..6cd8875d609ba 100644
--- a/test/e2e/app-dir/app/index.test.ts
+++ b/test/e2e/app-dir/app/index.test.ts
@@ -1751,6 +1751,26 @@ createNextDescribe(
             return 'yes'
           }, 'yes')
         })
+
+        it('should pass on extra props for beforeInteractive scripts with a src prop', async () => {
+          const browser = await next.browser('/script')
+
+          const foundProps = await browser.eval(
+            `document.querySelector('#script-with-src-noop-test').getAttribute('data-extra-prop')`
+          )
+
+          expect(foundProps).toBe('script-with-src')
+        })
+
+        it('should pass on extra props for beforeInteractive scripts without a src prop', async () => {
+          const browser = await next.browser('/script')
+
+          const foundProps = await browser.eval(
+            `document.querySelector('#script-without-src-noop-test-dangerouslySetInnerHTML').getAttribute('data-extra-prop')`
+          )
+
+          expect(foundProps).toBe('script-without-src')
+        })
       }
 
       it('should insert preload tags for beforeInteractive and afterInteractive scripts', async () => {
diff --git a/test/e2e/app-dir/app/public/noop-test.js b/test/e2e/app-dir/app/public/noop-test.js
new file mode 100644
index 0000000000000..ad22d3f4eecb7
--- /dev/null
+++ b/test/e2e/app-dir/app/public/noop-test.js
@@ -0,0 +1 @@
+console.log('test-noop')