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. #1156
Comments
|
I solved a similar problem using Importing a Component: Using the component: |
|
Fixed in #1172 |
|
@rluders @tulup-conner close after new version release. |
|
@iwebexpert Your code works and it actually solved the issue, only that it shows in the console a warning of: |
|
This is still happening with latest version: In remix js for |
set in your html tag className="dark", so that from the server side it already has the class tag |
Did u follow the installation guide from here? |
|
As of today, the issue is still there: "flowbite-react": "^0.10.1",
|
|
@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 |
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 (to dark) it will say the following warning in the console:
The full error in text and expanded:
Warning: Prop
data-activedid 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.
The text was updated successfully, but these errors were encountered: