From 7b0f4309752c8cd9cfb4cd9975b2596cae0b38b2 Mon Sep 17 00:00:00 2001
From: Konsti Wohlwend <n2d4xc@gmail.com>
Date: Tue, 23 Jun 2026 12:16:14 -0700
Subject: [PATCH] fix: suppress React 19 script warning in SsrScript (#1648)

---
 .../components/elements/ssr-layout-effect.tsx  | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/template/src/components/elements/ssr-layout-effect.tsx b/packages/template/src/components/elements/ssr-layout-effect.tsx
index 90a7cf57a..a37713c16 100644
--- a/packages/template/src/components/elements/ssr-layout-effect.tsx
+++ b/packages/template/src/components/elements/ssr-layout-effect.tsx
@@ -1,6 +1,10 @@
 "use client";
 import { useLayoutEffect } from "react";
 
+function escapeHtmlAttr(str: string): string {
+  return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
 export function SsrScript(props: { script: string, nonce?: string }) {
   useLayoutEffect(() => {
     // TODO fix workaround: React has a bug where it doesn't run the script on the first CSR render if SSR has been skipped due to suspense
@@ -9,11 +13,19 @@ export function SsrScript(props: { script: string, nonce?: string }) {
     (0, eval)(props.script);
   }, []);
 
+  // Embed the <script> in a span's innerHTML rather than as a React <script> JSX element to
+  // avoid React 19's "Scripts inside React components are never executed when rendering on the
+  // client" warning. The browser still executes the script during SSR HTML parsing, and on the
+  // client React sets innerHTML but the browser won't re-execute the script (innerHTML scripts
+  // don't run). Using the same HTML on both sides avoids hydration mismatches.
+  const nonceAttr = props.nonce ? ` nonce="${escapeHtmlAttr(props.nonce)}"` : '';
+
   return (
-    <script
+    <span
       suppressHydrationWarning  // the transpiler is setup differently for client/server targets, so if `script` was generated with Function.toString they will differ
-      nonce={props.nonce}
-      dangerouslySetInnerHTML={{ __html: props.script }}
+      dangerouslySetInnerHTML={{
+        __html: `<script${nonceAttr}>${props.script}</script>`,
+      }}
     />
   );
 }