Open YonatanToker opened 9 months ago
iwebexpert
commented
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 />
SutuSebastian
commented
9 months ago Fixed in #1172
SutuSebastian
commented
9 months ago @rluders @tulup-conner close after new version release.
YonatanToker
commented
9 months ago @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 :)
WhoAteDaCake
commented
3 months ago This is still happening with latest version: "flowbite": "^2.3.0", "flowbite-react": "^0.9.0",
In remix js for
jossimunoz
commented
3 months ago @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
SutuSebastian
commented
3 months ago 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?
jasonwang178
commented
2 months ago As of today, the issue is still there:
"flowbite-react": "^0.10.1",
teddythinh
commented
1 month ago @jasonwang178 I also get this warning from the development environment, but in the production it doesn't show.
miketaheny
commented
2 weeks ago 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
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: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.