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('', () => {
`);
});
+ it('loads an inline script', () => {
+ const {asFragment} = render(
+ createElement(NonceProvider, {
+ value: 'somenonce',
+ children: createElement(Script, {
+ dangerouslySetInnerHTML: {__html: 'alert("hi")'},
+ }),
+ }),
+ );
+
+ expect(asFragment()).toMatchInlineSnapshot(`
+
+
+
+ `);
+ });
+
it('should load scripts after hydration', () => {
const {asFragment} = render(
createElement(NonceProvider, {
@@ -53,4 +74,20 @@ describe('', () => {
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(
(props, ref) => {
const {waitForHydration, src, ...rest} = props;
- if (!src) throw new Error('Script components require a `src` prop');
if (waitForHydration) return ;
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,
});