From dda4e9a686d0f18943c32b421f6f5b036e2be10c Mon Sep 17 00:00:00 2001 From: Mateusz Paluszkiewicz Date: Thu, 11 Jul 2024 13:30:24 +0200 Subject: [PATCH] feat(theme-provider): Suppress hydration warning and add String.raw (#40) 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 /> )}