'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 |