flowbite
flowbite copied to clipboard
themesberg
initFlowbite emits console warning when using Next.js and React Server Components
Describe the bug
initFlowbite must be called after the DOM has been rendered. When using React Server Components and Next.js, a reasonable implementation is to call initFlowbite within a client component in a useEffect block. This works fine, but the following warning is emitted to the console: Warning: Extra attributes from the server: style + stacktrace in red color.
Note - I'm not using flowbite-react, as it works significantly different from pure javascript flowbite and I can't copy&paste html from the website (I'm a paid user and I'm relying on the code snippets from the website). This difference is a different issue though.
To Reproduce
- Install Flowbite as described in the Quickstart guide.
- Install Next.JS and and configure as described in the guide (but don't install flowbite-react).
- Build a form with a Tooltip component.
- Create a React client component to initialise Flowbite:
"use client";
import { useEffect } from "react";
import { initFlowbite } from "flowbite";
export function InitFlowbite() {
useEffect(() => {
initFlowbite();
}, []);
return null;
}
- Add the component to the main
layout.tsxcomponent:
<html lang="en" className={montserrat.variable}>
<body>
{children}
<InitFlowbite />
</body>
</html>
- Run. The warning should appear in the logs.
Expected behavior
No warning should appear when calling InitFlowbite.
Screenshots
Same, see it on a Remix project that I tried to include Flowbite into today. In my case, I initialize flowbite via
import 'flowbite';. Removing that line fixes the error though that's needed for Flowbite's JS to work. I've also tried including the CDN JS script, it causes the same error listed by the OP.
@vasanth-asokan I was thinking of trying Remix too - good to know it's having the same problem. Do you get the exact same error message? I thought this error is Next.js specific.
Exact same error in the trailing parts of the stack trace, of course the earlier parts vary... I came here trying to see if anyone's run into it before and was surprised to see the error report just a day earlier from you :)
Okay I see that's a React error, caused by the static import 'flowbite' itself. The module is messing up with the DOM when it's first loaded. I think that's a Flowbite bug, as DOM changes should happen only during explict initFlowbite() call.
Anyway my workaround was to import Flowbite with a dynamic import, and initalise it in useEffect. So a component to init flowbite could look like:
"use client";
import { useEffect } from "react";
// import { initFlowbite } from "flowbite"; <-- don't do that!
export function InitFlowbite() {
useEffect(() => {
import("flowbite").then((module) => module.initFlowbite());
}, []);
return null;
}