'Error while using flowbite with nextJS and typescript

I installed tailwind and flowbite to a NextJS project. As I did import "flowbite" in _app.tsx, I get the following error.

ReferenceError: document is not defined
    at Object.366 (D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:35:1)
    at __webpack_require__ (D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:496:41)
    at D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:509:17
    at D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:2631:3
    at Object.<anonymous> (D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:2633:12)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
error - ReferenceError: document is not defined
ReferenceError: document is not defined
    at Object.366 (D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:35:1)
    at __webpack_require__ (D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:496:41)
    at D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:509:17
    at D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:2631:3
    at Object.<anonymous> (D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:2633:12)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)

document is not defined gives a clue that javascript is creating problems. Please help with this. In my tsconfig.json allowJS:true is set then why is this creating problems?



Solution 1:[1]

from the docs, Flowbite is currently working on a standalone library for compatibility with React frameworks such as NextJS check here

Solution 2:[2]

I am facing the same issue here. You can try adding import "flowbite" inside of your index.js file and see it's fixed

Solution 3:[3]

if you are using remix js just add import 'flowbite' in entry.client.tsx file

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Victor Aiyeola
Solution 2 Zechst
Solution 3 Hossein Zafari