From cf5ad381b924c59f26d02ac66ffb6f4e08621af9 Mon Sep 17 00:00:00 2001
From: Jonathan Turcotte <jonathan.turcotte@constantcontact.com>
Date: Thu, 29 May 2025 16:43:17 -0400
Subject: [PATCH] fix: add suppressHydrationWarning when using nonce and
 disableNextScript

---
 src/script/env-script.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/script/env-script.tsx b/src/script/env-script.tsx
index f4dbb57f..19242e94 100644
--- a/src/script/env-script.tsx
+++ b/src/script/env-script.tsx
@@ -51,7 +51,16 @@ export const EnvScript: FC<EnvScriptProps> = ({
   // Note: When using Sentry, sentry.client.config.ts might run after the Next.js <Script> component, even when the strategy is "beforeInteractive"
   // This results in the runtime environments being undefined and the Sentry client config initialized without the correct configuration.
   if (disableNextScript) {
-    return <script nonce={nonceString} dangerouslySetInnerHTML={innerHTML} />;
+    // Set suppressHydrationWarning on the vanilla script tag if nonce is being used, as React will
+    // throw a ssr hydration error otherwise. This is because the browser removes the nonce from the
+    // DOM before the hydration check takes place, leading to a mismatch. This can be safely ignored.
+    return (
+      <script
+        suppressHydrationWarning={!!nonceString}
+        nonce={nonceString}
+        dangerouslySetInnerHTML={innerHTML}
+      />
+    );
   }
 
   // Use Next.js Script Component by default