From 0f1a25e4fa84d05613932f5472cc051b3db536f1 Mon Sep 17 00:00:00 2001 From: Mateusz Paluszkiewicz Date: Wed, 10 Jul 2024 20:00:45 +0200 Subject: [PATCH] feat(theme-provider): Suppress hydration warning and add String.raw This commit suppresses the hydration warning in the browser by adding `suppressHydrationWarning` to the script tag. This is necessary to prevent the browser from throwing a warning about extra attributes from the server, specifically `nonce`. Additionally, `String.raw` has been added for the manually injected script content. This is used to get the raw string form of template strings, which is useful when you want to avoid processing of escape sequences. --- packages/remix-themes/src/theme-provider.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/remix-themes/src/theme-provider.tsx b/packages/remix-themes/src/theme-provider.tsx index d072d59..ddf14e2 100644 --- a/packages/remix-themes/src/theme-provider.tsx +++ b/packages/remix-themes/src/theme-provider.tsx @@ -140,7 +140,7 @@ export function ThemeProvider({ return {children} } -const clientThemeCode = ` +const clientThemeCode = String.raw` (() => { const theme = window.matchMedia(${JSON.stringify(prefersLightMQ)}).matches ? 'light' @@ -205,6 +205,7 @@ export function PreventFlashOnWrongTheme({ // is finished loading. dangerouslySetInnerHTML={{__html: clientThemeCode}} nonce={nonce} + suppressHydrationWarning /> )}