fix: <Script> with beforeInteractive strategy ignores additional …

…attributes in App Router (vercel#59779) ### 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"` ([vercel#49830](vercel#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 vercel#49830
agustints · Jan 6, 2024 · 5d5fde0 · 5d5fde0
1 parent 0e622bc
commit 5d5fde0
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1 @@
+console.log('test-noop')