themesberg / themesberg/flowbite
initFlowbite emits console warning when using Next.js and React Server Components
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 9.4k
- Forks
- 862
- PR merge metrics
- No merged PRs in 30d
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the warning with the Quickstart and Next.js setup, the Tooltip component, and the client component that calls initFlowbite in useEffect. Inspect layout.tsx and the Flowbite initialization path; done means the example runs without the Extra attributes from the server: style warning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react, tailwindcss
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100