500 error when using Flowbite with Nuxt.js 3 and Tailwind on development environment. Production no 500 error.

[jamie3]

Describe the bug

I've created a Nuxt.js + Tailwind app according to the documentation here https://flowbite.com/docs/getting-started/nuxt-js/. When running the project locally using yarn dev I get the following error.

ERROR  document is not defined

  at Object.<anonymous> (node_modules/flowbite-datepicker/dist/main.cjs.js:595:13)
  at Module._compile (node:internal/modules/cjs/loader:1469:14)
  at Object..js (node:internal/modules/cjs/loader:1548:10)
  at Module.load (node:internal/modules/cjs/loader:1288:32)
  at Function._load (node:internal/modules/cjs/loader:1104:12)
  at Module.require (node:internal/modules/cjs/loader:1311:19)
  at require (node:internal/modules/helpers:179:18)
  at Object.<anonymous> (node_modules/flowbite/src/components/datepicker/index.ts:8:1)
  at Module._compile (node:internal/modules/cjs/loader:1469:14)
  at Object..js (node:internal/modules/cjs/loader:1548:10)


 WARN  [nuxt] Failed to stringify dev server logs. Received DevalueError: Cannot stringify arbitrary non-POJOs. You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.

It appears this is from the following line of codeimport { initFlowbite } from "flowbite";.

<script setup>
import { onMounted } from "vue";

// error occurs when running this line of code. Commenting the code fixes the 500 error
import { initFlowbite } from "flowbite";

// initialize components based on data attribute selectors
onMounted(() => {
  initFlowbite();
});
</script>

The HTML code app.vue contains the Flowbite sidebar https://flowbite.com/docs/components/sidebar/

When running this in production using yarn build && node .output/server/index.mjs the 500 error does not appear.

To Reproduce Steps to reproduce the behavior:

1. Setup a new Nuxt.js 3 project
2. Follow the documentation on https://flowbite.com/docs/getting-started/nuxt-js/
3. Edit the app.vue file and add the Sidebar vue/html code
4. Add the Flowbite JS code https://flowbite.com/docs/getting-started/quickstart/
5. Run yarn dev

500 error occurs

1. If you run yarn build && node .output/server/index.mjs the error does not occur.

Expected behavior

No 500 error should occur

Screenshots No screen shots.

Desktop (please complete the following information):

• MacOS 12.2.1
• Chrome 127.0.6533.122
• Arm 64

[piscis]

It appears the Nuxt 3 Starter template is outdated. In the documentation it is stated you have to initialize when the component gets mounted it looks like it's not enough to use onMounted because it is possible that document is not available e.g. during SSR. The following steps worked for me (flowbite 2.5.1):

1. Create a flowbite composable as suggested in the docs

# /composable/useFlowbite.ts

export interface FlowbiteInstance {
  initAccordions: () => void
  initCarousels: () => void
  initCollapses: () => void
  initDials: () => void
  initDismisses: () => void
  initDrawers: () => void
  initDropdowns: () => void
  initModals: () => void
  initPopovers: () => void
  initTabs: () => void
  initTooltips: () => void
  initInputCounters: () => void
  initCopyClipboards: () => void
  initDatepickers: () => void
  initFlowbite: () => void
}

export function useFlowbite(callback: (flowbite: FlowbiteInstance) => void) {
  if (import.meta.client === true) {
    import('flowbite').then((flowbite) => {
      callback(flowbite)
    })
  }
}

2. In pages initialize the flowtype components (client side only) after the component mounted.

# /pages/foo.vue
<script setup lang="ts">
import { useFlowbite } from '@/composables/useFlowbite'
import { onMounted } from 'vue'

onMounted(() => {
  useFlowbite(({ initFlowbite }) => {
    initFlowbite()
  })
})
...
[REST OF YOUR PAGE]