Wasp-lang•9mo ago

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.

5 Replies

miho•9mo 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.fejesOP•9mo ago

It works! Hvala puno! :boi:

miho•9mo ago

Ništa, sretno s projektom 🙂

david.fejesOP•9mo ago

Hvala! Svaka vam cast na Wasp-u, dosta je intuitivno i dosta mi ubrzava rad. Samo tako nastavite!

martinsos•9mo ago

Hah super za cuti, thanks :)!

Gaming

Programming

After migration flowbite-react is not working