Issue with nextjs using flowbite tailwind css

[xiaolin911211]

Please help: getting this issue "ReferenceError: window is not defined" for Nextjs with import flowbite
npm: '8.5.5',
node: '16.15.0',
Next.js v12.1.5

[icyJoseph]

Hi,

You need to do typeof window !== 'undefined' checks.

Do you have any code to share? There must be a function from Flowbite that's trying to access the window during SSR. Usually there's a flag one must pass, or the framework does the check internally. If you share some code I can help you debug, or find info on Flowbite's docs to help you.

EDIT

Looks like it is a known issue, and not very trivial after all, themesberg/flowbite#51.

[ruanrita]

Use useEffect for to fix this issue

In pages/_app.tsx

useEffect(() => {
import("flowbite/dist/flowbite");
}, []);

Or complete solution, follow the step below:
https://www.kindacode.com/article/how-to-correctly-use-bootstrap-5-in-next-js/

[davidhex]

for example, if you only use Accordion, add following into your function component, it works.

import { initAccordions } from "flowbite";

useEffect(() => {
initAccordions();
});

[anshumanfs]

use the Next page component on each file you are using

import type { NextPage } from "next"

and extend at every component file you are using

const DemoComponent :NextPage = () => { return (<></>) }