After migration flowbite-react is not working

I migrated from version 0.11 to 0.12. Following the steps, I managed to fix everything except for flowbite-react. I'm not sure if the issue lies with the library or my migration process, so I'll explain the whole process. First, I added Tailwind CSS by creating tailwind.config.cjs and postcss.config.cjs files. After that, I imported Tailwind CSS into the CSS file and enabled Tailwind to work. Following the documentation for installing dependencies, I installed flowbite-react with the command npm install -D flowbite-react. Then, I added the flowbite plugin to tailwind.config.cjs so it looks like this:
const { resolveProjectPath } = require('wasp/dev');

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}'),
'node_modules/flowbite-react/lib/esm/**/*.js',
],
theme: {
extend: {},
},
plugins: [require('flowbite/plugin')],
};
const { resolveProjectPath } = require('wasp/dev');

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}'),
'node_modules/flowbite-react/lib/esm/**/*.js',
],
theme: {
extend: {},
},
plugins: [require('flowbite/plugin')],
};
after wasp start it is not working. I have attached example of Navbar how it looks after migration and how it was looking on version 0.11. I have tried installing npm i autoprefixer postcss tailwindcss flowbite, installing flowbite-react as non dev dependency but none of that works. I have created side React project with Vite to make sure i have installed flowbite-react properly on non Wasp project following flowbite-react documentation. Do you have any suggestions how can I fix this? All of my components are made of flowbite-react components.
No description
No description
5 Replies
miho
miho8mo ago
Could you try modifying your tailwind.config.js to look like this:
const { resolveProjectPath } = require('wasp/dev');

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}'),
resolveProjectPath('./node_modules/flowbite-react/lib/esm/**/*.js'),
],
theme: {
extend: {},
},
plugins: [require('flowbite/plugin')],
};
const { resolveProjectPath } = require('wasp/dev');

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}'),
resolveProjectPath('./node_modules/flowbite-react/lib/esm/**/*.js'),
],
theme: {
extend: {},
},
plugins: [require('flowbite/plugin')],
};
Every path in the content array should be wrapped with resolveProjectPath
david.fejes
david.fejes8mo ago
It works! Hvala puno! :boi:
miho
miho8mo ago
Ništa, sretno s projektom 🙂
david.fejes
david.fejes8mo ago
Hvala! Svaka vam cast na Wasp-u, dosta je intuitivno i dosta mi ubrzava rad. Samo tako nastavite!
martinsos
martinsos8mo ago
Hah super za cuti, thanks :)!
Want results from more Discord servers?
Add your server