Global theme is not applied after Next.js Fast Refresh

NAsejevs commented 3 months ago

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.

NAsejevs commented 3 months ago

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.

jordanful commented 2 months ago

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.

SutuSebastian commented 2 months ago

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?

jordanful commented 2 months ago

Does it work when u refresh the page?

Negative

SutuSebastian commented 2 weeks ago

Revisiting this, did u try to upgrade next? or scaffold a new app and test the same custom theme approach?

serafinjacob commented 1 week ago

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.

SutuSebastian commented 1 week ago

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).

themesberg / flowbite-react