flowbite-react
flowbite-react copied to clipboard
themesberg
Global theme is not applied after Next.js Fast Refresh
Steps to reproduce
Scenario 1:
- Create custom global Flowbite theme
- Wrap your page content in Flowbite component with theme passed as theme prop
- Launch Next.js dev server and perform Fast Refresh
- Notice no custom theme for any component
- Hard refresh
- Notice custom theme is applied as expected
Scenario 2:
- Create custom global Flowbite theme
- Wrap your page content in Flowbite component with theme passed as theme prop
- Launch Next.js dev server and open any Dropdown
- Notice no custom theme applied to Dropdown items
- Perform Fast Refresh
- Notice custom theme applied to Dropdown items
I assume both scenarios are somehow related to each other, hence no separate bug report.
Current behavior
Custom theme is hard to use during development. Also, Dropdowns avoid custom themes altogether.
Expected behavior
Custom theme to be applied as expected.
Context
I'm wrapping my Next.js app content in Flowbite component as follows:
layout.tsx
<body className={classNames(poppins.className, "dark")}>
<Flowbite theme={{ theme: theme }}>
<Navigation />
{children}
</Flowbite>
</body>
Running latest verion of Next.js, Flowbite and Tailwind.
tailwind.config.ts
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./src/configs/**/*.{js,ts,jsx,tsx,mdx}",
"node_modules/flowbite-react/lib/esm/**/*.js",
],
theme: {},
plugins: [require("flowbite/plugin")],
}
./src/configs/theme.ts contains the custom Flowbite theme
I have tried rendering all themed components with "use client", but this has no different results.
So it looks like themes work as expected with Fast Refresh on Next.js 13.0.3, but no longer work with Fast Refresh on 13.0.4.
I am using Next 13+ and I can only get themes to work if I directly wrap the individual components. Wrapping the entire app (e.g. in the layout) does not theme my components (doesn't seem related to fast refresh here). Client vs server components didn't seem to make a difference either.
I am using Next 13+ and I can only get themes to work if I directly wrap the individual components. Wrapping the entire app (e.g. in the layout) does not theme my components (doesn't seem related to fast refresh here). Client vs server components didn't seem to make a difference either.
Does it work when u refresh the page?
Revisiting this, did u try to upgrade next? or scaffold a new app and test the same custom theme approach?
I'm having the same issue. I'm running next 14.2.4, latest version of flowbite-react (0.10.1). Same as scenarios described above. I'm wrapping everything within
tag of the root layout with the customTheme.On dev server start the custom theme isn't applied. On page refresh the custom theme is applied. On Fast Refresh the custom theme is unapplied.
Not sure if we can do much since Next.js decides how it does the HMR internally, and the <Flowbite> provider is based on a singleton (in-memory variable), not using any React context to pass data in.
The issue is that if the HMR replaces one of the core pieces in which the <Flowbite> provider has set values to, the scope is gone as well, therefore the values are gone, probably until the next re-render (i need to test it).