datepicker causing error in SSR starting with version v2.4.0 (document is not defined)

[depeele]

Describe the bug The removal of the datepicker-related webpack configuration and src/plugins/ between flowbite v2.3.0 and v2.4.0 introduced an error with SSR rendered code.

This removal causes the full flowbite-datepicker package to be included in the final, minimized version of flowbite. Within the full flowbite-datepicker package, the first line of js/lib/dom.js causes SSR code to fail with a "document is not defined" error:

const range = document.createRange();

For SSR to be able to properly use flowbite.min.js either:

1. The webpack configuration and src/plugins/ need to be reverted to what was used for flowbite v2.3.0;
2. OR flowbite-datepicker needs to update js/lib/dom.js to something like:

   const range = (typeof document !== 'undefined' && document.createRange());
   

Issue #921 has a comment suggesting the use of a composable to ensure flowbite is not included in SSR code, but there are cases where the way flowbite is included is not in the control of the end user (e.g. svelte-flowbite).

Given that this issue is related to a single unprotected use of document, requiring the end-user to ensure flowbite is not included in SSR code seems like over-kill.

[depeele]

I've also added a comment to a related flowbite-datepicker issue #41 recommending the typeof document solution.

[zoltanszogyenyi]

Hey @depeele,

For SSR you just need to make sure the client (aka. browser) is available.

Here's a guide for Angular's SSR, for example:

https://flowbite.com/docs/getting-started/angular/#using-with-angular-ssr

Can you please try this? Technically you can use the datepicker plugin directly from the core JS Flowbite.

[samsonc89]

I'm running into this issue when trying to deploy a project with Astro. We're not even using a datepicker anywhere and it's causing the build error

[depeele]

@zoltanszogyenyi : This approach does NOT resolve the issue I have reported. I believe this issue should be reopened because my problem has not been resolved. Below are the details of the ongoing problem:

@zoltanszogyenyi suggested:

For SSR you just need to make sure the client (aka. browser) is available.

Here's a guide for Angular's SSR, for example:

https://flowbite.com/docs/getting-started/angular/#using-with-angular-ssr

Can you please try this? Technically you can use the datepicker plugin directly from the core JS Flowbite.

For my use-case:

1. I have no control over how flowbite is loaded since it is being loaded by the svelte-flowbite module that I am using;
2. I am not making use of the date picker but it is being included due to the way flowbite was changed between v2.3.0 and 2.4.0 — removal of the datepicker-related webpack configuration and src/plugins/;
3. The date picker component includes initialization that it performs whether or not the date picker is actually used — js/lib/dom.js : const range = document.createRange();

Item 3 is the root cause of the issue which was effectively mitigated by the "plugin" approach previously used by flowbite, specifically for this date picker component.

To enable the use of newer versions of flowbite in projects such as mine, the webpack configuration and src/plugins/ need to be reverted to what was used for flowbite v2.3.0.

Again, given that this issue is related to a single unprotected use of document within a sub-module that flowbite has chosen to include, requiring the end-user to ensure flowbite is not included in SSR code seems like over-kill — particularly in cases where this approach is not an option.

Every thing else in flowbite works fine within SSR code. This single date picker problem is the cause of this issue.

Thank you!

[depeele]

This entire issue seems related to pull request 907

[20x-dz]

For SSR you just need to make sure the client (aka. browser) is available.

This is a contradiction. The client cannot be made available on the server.

If what you meant is to "ensure to not load this on the server by checking if it's running on the client", the this is exactly the issue that people are reporting (e.g. https://github.com/themesberg/flowbite-datepicker/issues/41 or here), as the datepicker code failing is still parsed on the server.

There have been posted a couple of decent solutions, please pick one and apply it. Thank you very much in advance!