From 8fd9ddcc5fcd8d5926c0e871dd25493d5d2c255f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Far=C3=A8s=20SIONI?= <82713835+fsioni@users.noreply.github.com> Date: Sun, 5 Mar 2023 01:20:18 +0100 Subject: [PATCH] fix(/src/lib/components/Flowbite): fix `window is not defined` in `next.js` (#652) Thanks @fsioni -- * fix(themecontext): fixing `ReferenceError: window is not defined error with Next.js The variable `userPreferenceIsDark` was initialized with a value from the window object. This was causing an error with Next because of SSR. I added the check of the window, if it's on the server side, set to white * fix(themecontext): fixing `ReferenceError: window is not defined` error with Next.js The variable`userPreferenceIsDark` was initialized with a value from the window object. This was causing an error with Next because of SSR. I added the check of the window, if it's on the server side the value is set to `false` --- src/lib/components/Flowbite/ThemeContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/Flowbite/ThemeContext.tsx b/src/lib/components/Flowbite/ThemeContext.tsx index 5396e2f27..0b87435eb 100644 --- a/src/lib/components/Flowbite/ThemeContext.tsx +++ b/src/lib/components/Flowbite/ThemeContext.tsx @@ -31,7 +31,7 @@ export function useTheme(): ThemeContextProps { } export const useThemeMode = (): [Mode, React.Dispatch>, () => void] => { - const userPreferenceIsDark = () => window.matchMedia?.('(prefers-color-scheme: dark)').matches; + const userPreferenceIsDark = () => windowExists() && window.matchMedia?.('(prefers-color-scheme: dark)').matches; const getPrefersColorScheme = (): Mode => (userPreferenceIsDark() ? 'dark' : 'light'); const onToggleMode = () => { const newMode = mode === 'dark' ? 'light' : 'dark';