Skip to content

fix: add suppressHydrationWarning when using nonce and disableNextScript #184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: development
Choose a base branch
from
Open

fix: add suppressHydrationWarning when using nonce and disableNextScript #184

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/script/env-script.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down