Version 1.3.0 is broken on Nuxt, NextJS, Sveltekit SSR

[delcantao]

It is throwing an error stating 'document is not defined'. It may be attempting to access the DOM on the server side. Reverting to version 1.2.6 resolves the issue, but the version 1.3.0 is broken.

Stack trace shows the error is on date picker

I don't even use the DatePicker component in my project.

\node_modules\flowbite-datepicker\dist\main.cjs.js:595:13) at Module._compile (node:internal/modules/cjs/loader:1376:14) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at Module.require (node:internal/modules/cjs/loader:1235:19) at require (node:internal/modules/helpers:176:18) at Object. (D:\repos__repo\laundrybag.ch\LaundryBag.App\node_modules\flowbite\src\components\datepicker\index.ts:8:1) at Module._compile (node:internal/modules/cjs/loader:1376:14) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)

[fhrancoo]

i have the same problem

[MrJoy]

This also impacts static precompilation with Next.JS.

[20x-dz]

Can confirm with latest nuxt 3. Issue is related to https://github.com/themesberg/flowbite-datepicker/blob/master/js/lib/dom.js#L1

When commenting this out in the dist file, SSR works just fine.

I honestly fail to understand why this was added in a minor version in flowbite, especially considering the updated SSR-related docs, where everything should only be imported on the client. And then there's this dependency, that runs even though it's not used.

[oiluis]

Yep ... same error ... I had to downgrade to flowbite 2.3.0

[shreejalmaharjan-27]

+1

[rushkii]

this issue became a problematic on sveltekit SSR.

[pReya]

Same problem with Astro.

[20x-dz]

Do you have insights on how we can work around this issue until it is fixed @zoltanszogyenyi ? Any help would be appreciated… tyvm! 🙏

[MrJoy]

@20x-dz My workaround has been to forcibly pin relevant deps to older versions until the issue is resolved.

  "resolutions": {
    "flowbite-datepicker": "1.2.6",
    "flowbite": "2.3.0"
  },

[depeele]

Prior to flowbite 2.4.0, flowbite-datepicker was included via a plugin that only included a portion of flowbite-datepicker in the final, minimized flowbite.min.js. Starting with flowbite 2.4.0, the entire flowbite-datepicker package is included directly in the final, minimized flowbite.min.js.

The inclusion of flowbite-datepicker in the primary flowbite.min.js causes SSR code to fail with a "document is not defined" error due to lib/js/dom.js:

var range = document.createRange();

This issue can be easily resolved within flowbite-datepicker by changing the line to:

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

Alternatively, the problematic pre-initialization of range could be moved into code that is only executed if flowbite-datepicker is actually used:

var range = null;
export function parseHTML(html) {
  if (range == null) { range = document.createRange() }
  return range.createContextualFragment(html);
}

Without one of these changes, the upstream flowbite would need to exclude flowbite-datepicker from the final, minimized flowbite.min.js

[zoltanszogyenyi]

Merged the PR! I'll do some tests and release 1.3.1. Thanks @depeele.

[zoltanszogyenyi]

https://github.com/themesberg/flowbite-datepicker/releases/tag/v1.3.1