flowbite-react: Error when using flowbite-react in Next.js: ReferenceError: document is not defined

Describe the bug When rendering a page with a modal, if the page wasn’t navigated to from a previous context, e.g. using Link from next/link, then a huge stack trace about document being undefined appears from the Modal component.

To Reproduce Steps to reproduce the behavior:

Use the Modal in any Next.js 13 page.

Expected behavior The modal should open and the page should load normally.

Screenshots If applicable, add screenshots to help explain your problem.

System information:

  • Device: Desktop PC
  • Resolution: 1440p
  • OS: Windows 10
  • Browser: Firefox
  • Version: Windows 10

Project information:

  • Tailwind: 3.2.0
  • Flowbite: 1.6.3
  • Flowbite React: 0.3.8
  • Type: Next.js

Additional context Error trace:

 1 of 1 unhandled error
Server Error

ReferenceError: document is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
ModalComponent
file:/home/oleg/case0/node_modules/.pnpm/flowbite-react@0.3.8_m4gtgwxodlxragupfwvq4tjnru/node_modules/flowbite-react/lib/cjs/components/Modal/Modal.js (17:50)
renderWithHooks
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderIndeterminateComponent
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5731:15)
renderElement
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderContextProvider
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5920:3)
renderElement
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6017:11)
renderNodeDestructiveImpl
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:/home/oleg/case0/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 10
  • Comments: 22 (5 by maintainers)

Commits related to this issue

Most upvoted comments

Can confirm this is happening here too, since last release 0.3.8

@rluders its because flowbite-next-starter is actually running on 0.3.7, if you see here: https://github.com/tulupinc/flowbite-next-starter/blob/main/yarn.lock#L1612

If you clone the repo, delete yarn.lock and then yarn install it will install the latest flowbite-react which is 0.3.8. Then the error mentioned in this issue occurs from yarn build

+7
cadu0xcarbon on Feb 2, 2023

I’ve opened up a fix here https://github.com/themesberg/flowbite-react/pull/677

In the mean time, I’ve published the changes under"@alfiejones/flowbite-react"

+4
AlfieJones on Mar 27, 2023

Any news as to when this fix might be released, @tulup-conner ?

+1
rodmagaldi on Apr 3, 2023

@nsoubelet My workaround has been to not use the flowbite-react component and instead convert the HTML they provide on flowbite.com into a Modal that I display on my page like this:

const useModal = () =>{
  // implementation
  return { modalContent, isOpen, setOpen, closeModal }
}

// somewhere later
const MyPage = () => {
  const { modalContent, isOpen, openModal, closeModal } = useModal();
  

  const handleAlert = () => {
    openModal(
      <div>
          {/* content from flowbite */}
          <button onClick={closeModal}>Close</button>
       </div>
    );
  }
  

  return (
    <>
      <MainPageComponents onAlertClick={handleAlert} />
      {isOpen && modalContent}
    </>
}
+1
osilkin98 on Mar 20, 2023

Hi, also happening to me using the following versions:

"flowbite": "^1.6.3",
"flowbite-react": "^0.4.2",
"next": "13.2.4",
"react": "18.2.0"

@osilkin98 Have you found a workaround? Since I am not sure when the fix will be released.

+1
nsoubelet on Mar 14, 2023

@tulup-conner I’m still having this issue on Flowbite v0.4.2

+1
osilkin98 on Mar 9, 2023

This is still broken on 0.4.1

+1
cesarvarela on Mar 3, 2023
Read more comments on GitHub
← flowbite-react: Button can't be rendered as it's return type is ReactNode.
flowbite-react: Sidebar.Collapse and other components fails to accept heroicons/react →