Some components cannot be used with Next's SSR

[ferretwithaberet]

Describe the bug
I noticed this bug while trying to use the Modal component in a Next.js project. The error I am getting is document is not defined. I dug up a bit and I found out that the Modal component uses document.body as the default value for the root param and it also uses document.createElement to create it's container which it tries to append to root. The bug comes from Next.js trying to render the react in a SSR environment where object like window or document are not defined.

To Reproduce
Steps to reproduce the behavior:

1. Make a Next.js project
2. Add flowbite-react
3. Make a Next.js page where you try to use the Modal component
4. See error

Expected behavior
Component should work properly and no error should be logged to the console.

Desktop (please complete the following information):

• OS: [e.g. iOS] EndeavourOS Linux x86_64 Kernel 5.17.7-arch1-1
• Browser [e.g. chrome, safari] Brave
• Version [e.g. 22] V1.38.115 (Chromium 101.0.4951.64)

Additional context
While deciding what to use, I also looked at other component libraries and I saw this PR which might be how they solved this issue, but I am not sure if that commit fixes this issue.

[tulup-conner]

Thank you! This is my fault. And I should know better, since Im writing a server side app. (I just dont use Flowbite Modals, even though I wrote them!)

The solution is to just check to make sure window or document exists before attempting to use it.

I will add that today!

[zhaodong-wang]

I am still seeing this error. I think except for checking window you should also check for document?

[samratarmas]

Hi @tulup-conner,

I see that you did merge pull request #124 to address this promptly, however, the latest source code somehow does not have those lines that you made changes to.

I can confirm that the issue has not been resolved. You can replicate this yourself by importing modal components inside nextjs app. The error that I am getting is:

ReferenceError: document is not defined at ModalComponent (webpack-internal:///(sc_client)/../../node_modules/flowbite-react/lib/cjs/components/Modal/Modal.js:17:50)

This error stems from the line:
root = document.body present in Modal.tsx

Those #124 changes are extremely vital to make flowbite-react work with Nextjs, is it possible to bring them back? I will also create a new issue and link to this commment since you closed this one as completed a while ago.

[tulup-conner]

Hi @tulup-conner,

I see that you did merge pull request #124 to address this promptly, however, the latest source code somehow does not have those lines that you made changes to.

I can confirm that the issue has not been resolved. You can replicate this yourself by importing modal components inside nextjs app. The error that I am getting is:

ReferenceError: document is not defined at ModalComponent (webpack-internal:///(sc_client)/../../node_modules/flowbite-react/lib/cjs/components/Modal/Modal.js:17:50)

This error stems from the line: root = document.body present in Modal.tsx

Those #124 changes are extremely vital to make flowbite-react work with Nextjs, is it possible to bring them back? I will also create a new issue and link to this commment since you closed this one as completed a while ago.

See #609

[bradley]

So to be clear this is closed but not resolved?

[rluders]

@bradley #609