flowbite
flowbite copied to clipboard
Nuxt2: Cannot find module 'flowbite' from '/app'
Hi! Im running "nuxt": "2.17.0" and "flowbite": "^2.2.0".
I've setup flowbite in my tailwind config file:
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: ['./components/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './node_modules/flowbite/**/*.{js,ts}'],
.......
pattern: /(text|bg)-(red|green|blue|yellow)-(500)/,
},
],
plugins: [require('flowbite/plugin'), require('@tailwindcss/forms')],
}
And in my component I have the following code:
<template>
<div>
<button :id="`${name}Button`" :data-dropdown-toggle="name" class="group flex items-center">
<font-awesome-icon :icon="['fas', faClass]" class="text-xl ps-3 pe-1 text-blue-500 duration-300 group-hover:scale-110 group-hover:text-blue-600" />
</button>
<div :id="name" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-60 dark:bg-gray-700 dark:divide-gray-600">
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" :aria-labelledby="`${name}Button`">
<slot />
</ul>
</div>
</div>
</template>
<script>
import { initDropdowns } from 'flowbite'
export default {
props: {
name: {
type: String,
required: true,
},
faClass: {
type: String,
default: 'ellipsis-vertical',
},
},
mounted() {
initDropdowns()
},
}
</script>
This all works great when I run the project locally, everything works as expected.
When I release the project to production however, I get a nuxt server error: https://birdblocker-bv.sentry.io/share/issue/7409d0ec65d14b428d807d9886e8d578/
Does anybody know how I can solve this?