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

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix the `Script` component to not throw when using it for inline scripts with `dangerouslySetInnerHTML`

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',
+    );
+  });
 });

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>,
   });