Open YonatanToker opened 9 months ago
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 />
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: 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
@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?
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:![image](https://github.com/themesberg/flowbite-react/assets/116793943/8da45fe6-5407-4359-a444-aacaafdec47c)
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-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:534I 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.