Error while using flowbite with nextJS and typescript

Question

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?

As next.js is server-side-rendered no document or window (browser only) are present. https://stackoverflow.com/questions/24647839/referenceerror-document-is-not-defined-in-plain-javascript — Timsib Adnap, Feb 23 '22 at 13:40
I'm facing same issue now. Did you later find your way around it? If yes, how? — GeniusHawlah, Mar 03 '22 at 07:42

score 1 · Answer 1 · answered Mar 08 '22 at 04:38

1

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

answered Mar 08 '22 at 04:38

Victor Aiyeola

21
3

zhengpeng cong · Answer 2 · 2023-01-12T08:49:01.723

1

This work fine for me. Every flowbite component have a init function to make it interactive.

import { initAccordions } from "flowbite";

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

edited Jan 12 '23 at 08:49

answered Jan 12 '23 at 08:47

zhengpeng cong

11
2

score -1 · Answer 3 · answered May 01 '22 at 17:40

-1

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

answered May 01 '22 at 17:40

Hossein Zafari

29
4

Error while using flowbite with nextJS and typescript

3 Answers3