From b0d3bc0696d266fcfc4eb93d0a4adb9ccb56ade6 Mon Sep 17 00:00:00 2001
From: Bret Little <bret.little@shopify.com>
Date: Wed, 14 Aug 2024 05:36:58 -0400
Subject: [PATCH] Fix the `Script` component to not throw within inline scripts
 (#2428)

* Fix the `Script` component to not throw within inline scripts

* Apply suggestions from code review

---------

Co-authored-by: Fran Dios <frankdiox@gmail.com>
---
 .changeset/flat-foxes-rhyme.md           |  5 ++++
 packages/hydrogen/src/csp/Script.test.ts | 37 ++++++++++++++++++++++++
 packages/hydrogen/src/csp/Script.tsx     |  8 +++--
 3 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/flat-foxes-rhyme.md

diff --git a/.changeset/flat-foxes-rhyme.md b/.changeset/flat-foxes-rhyme.md
new file mode 100644
index 000000000..a65336705
--- /dev/null
+++ b/.changeset/flat-foxes-rhyme.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix the `Script` component to not throw when using it for inline scripts with `dangerouslySetInnerHTML`
diff --git a/packages/hydrogen/src/csp/Script.test.ts b/packages/hydrogen/src/csp/Script.test.ts
index 5d35454f5..754c5e3b1 100644
--- a/packages/hydrogen/src/csp/Script.test.ts
+++ b/packages/hydrogen/src/csp/Script.test.ts
@@ -33,6 +33,27 @@ describe('<Script />', () => {
     `);
   });
 
+  it('loads an inline script', () => {
+    const {asFragment} = render(
+      createElement(NonceProvider, {
+        value: 'somenonce',
+        children: createElement(Script, {
+          dangerouslySetInnerHTML: {__html: 'alert("hi")'},
+        }),
+      }),
+    );
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <script
+          nonce="somenonce"
+        >
+          alert("hi")
+        </script>
+      </DocumentFragment>
+    `);
+  });
+
   it('should load scripts after hydration', () => {
     const {asFragment} = render(
       createElement(NonceProvider, {
@@ -53,4 +74,20 @@ describe('<Script />', () => {
       attributes: {},
     });
   });
+
+  it('throws without a src prop when using waitForHydration', () => {
+    function renderComponent() {
+      render(
+        createElement(NonceProvider, {
+          value: 'somenonce',
+          children: createElement(Script, {
+            waitForHydration: true,
+          }),
+        }),
+      );
+    }
+    expect(renderComponent).toThrowError(
+      '`waitForHydration` with the Script component requires a `src` prop',
+    );
+  });
 });
diff --git a/packages/hydrogen/src/csp/Script.tsx b/packages/hydrogen/src/csp/Script.tsx
index a02c2c5e9..7c85603c7 100644
--- a/packages/hydrogen/src/csp/Script.tsx
+++ b/packages/hydrogen/src/csp/Script.tsx
@@ -15,7 +15,6 @@ export const Script = forwardRef<HTMLScriptElement, ScriptProps>(
   (props, ref) => {
     const {waitForHydration, src, ...rest} = props;
 
-    if (!src) throw new Error('Script components require a `src` prop');
     if (waitForHydration) return <LazyScript src={src} options={rest} />;
 
     const nonce = useNonce();
@@ -36,9 +35,14 @@ function LazyScript({
   src,
   options,
 }: {
-  src: string;
+  src?: string;
   options: JSX.IntrinsicElements['script'];
 }) {
+  if (!src)
+    throw new Error(
+      '`waitForHydration` with the Script component requires a `src` prop',
+    );
+
   useLoadScript(src, {
     attributes: options as Record<string, string>,
   });