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. stackoverflow.com/questions/24647839/… — Timsib Adnap
– Timsib Adnap, Commented Feb 23, 2022 at 13:40
I'm facing same issue now. Did you later find your way around it? If yes, how? — GeniusHawlah
– GeniusHawlah, Commented Mar 3, 2022 at 7:42

zhengpeng cong · Accepted Answer · 2023-01-12 08:49:01Z

2

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, 2023 at 8:49

answered Jan 12, 2023 at 8:47

zhengpeng cong

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aiyeola · Accepted Answer · 2022-03-08 04:38:13Z

1

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

answered Mar 8, 2022 at 4:38

aiyeola

314 bronze badges

Comments

Hossein Zafari · Accepted Answer · 2022-05-01 17:40:27Z

-1

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

answered May 1, 2022 at 17:40

Hossein Zafari

296 bronze badges

Collectives™ on Stack Overflow

Error while using flowbite with nextJS and typescript

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related