themesberg
When using the "ThemeModeScript" component from Flowbite in the "<head>" section of my Next.js application, I am encountering a warning related to a mismatch in the "data-active" prop during server-client hydration.
When you want to include in your layout for your whole app a theme, you can do so with wrapping your whole app with a Flowbite component which will take care of the user preference automatically, now just doing that is not enough due to flickering as in the documentation said: "to avoid page flicker (if dark mode is set) before NextJS hydrates the content, ThemeModeScript component must be rendered in Head component".
So we'll add the head with the ThemeModeScript component, layout.js:
Now thing is that if you have a preference to dark mode or if you press the <DarkThemeToggle /> (to dark) it will say the following warning in the console:
The full error in text and expanded:
Warning: Prop data-active did not match. Server: "false" Client: "true"
at svg
at IconBase
at HiSun
at button
at DarkThemeToggle (webpack-internal:///(app-pages-browser)/./node_modules/flowbite-react/lib/esm/components/DarkThemeToggle/DarkThemeToggle.js:18:28)
at body
at html
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:295:11)
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:169:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:100:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:130:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:451:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:128:11)
at RSCComponent
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:144:11)
window.console.error @ app-index.js:34
console.error @ hydration-error-info.js:41
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
warnForPropDifference @ react-dom.development.js:32523
diffHydratedGenericElement @ react-dom.development.js:34736
diffHydratedProperties @ react-dom.development.js:34916
hydrateInstance @ react-dom.development.js:35925
prepareToHydrateHostInstance @ react-dom.development.js:7287
completeWork @ react-dom.development.js:19675
completeUnitOfWork @ react-dom.development.js:25793
performUnitOfWork @ react-dom.development.js:25598
workLoopConcurrent @ react-dom.development.js:25573
renderRootConcurrent @ react-dom.development.js:25529
performConcurrentWorkOnRoot @ react-dom.development.js:24382
workLoop @ scheduler.development.js:261
flushWork @ scheduler.development.js:230
performWorkUntilDeadline @ scheduler.development.js:534
##I tried a few solutions##
I tried to write without the ToggleTheme and then I get this warning in the console:
Now I also tried doing without the ThemeModeScript component in the head but then the page would take time and flick from white to dark if the preference is dark and I would have the same first warning in the console.
If you attempted any potential solutions or workarounds to make the warning go away, please mention them.
Thank you for your assistance in resolving the issue.
I solved a similar problem using next/dynamic.
Perhaps my code can be useful to you.
Importing a Component:
import dynamic from 'next/dynamic'
const DynamicDarkThemeToggle = dynamic(() => import('flowbite-react').then((mod) => mod.DarkThemeToggle), { ssr: false })
Using the component:
<DynamicDarkThemeToggle />
@iwebexpert Your code works and it actually solved the issue, only that it shows in the console a warning of: Extra attributes from the server: class at html and then bla bla bla something in the webpack internal stuff... Anyway I think this is not significant, thank you very much for the response :)
This is still happening with latest version: "flowbite": "^2.3.0", "flowbite-react": "^0.9.0",
In remix js for <ThemeModeScript />
@iwebexpert Your code works and it actually solved the issue, only that it shows in the console a warning of: Extra attributes from the server: class at html and then bla bla bla something in the webpack internal stuff... Anyway I think this is not significant, thank you very much for the response :)
set in your html tag className="dark", so that from the server side it already has the class tag
This is still happening with latest version:
"flowbite": "^2.3.0", "flowbite-react": "^0.9.0",In remix js for
Did u follow the installation guide from here?
https://flowbite-react.com/docs/guides/remix
@jasonwang178 I also get this warning from the development environment, but in the production it doesn't show.
This was resolved for me by adding suppressHydrationWarning on the tag per documentation here: https://flowbite-react.com/docs/guides/next-js#dark-mode
