Wasp•2y 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

tailwind.config.cjs

and

postcss.config.cjs

postcss.config.cjs

postcss.config.cjs

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

npm install -D flowbite-react

npm install -D flowbite-react

npm install -D flowbite-react. Then, I added the flowbite plugin to

tailwind.config.cjs

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')],
};

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

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

npm i autoprefixer postcss tailwindcss flowbite

npm i autoprefixer postcss tailwindcss flowbite

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.

miho•3/11/24, 3:02 PM

Could you try modifying your

tailwind.config.js

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')],
};

miho•3/11/24, 3:03 PM

Every path in the content array should be wrapped with resolveProjectPathresolveProjectPath

david.fejesOP•3/11/24, 3:53 PM

It works! Hvala puno! :boi:

miho•3/11/24, 3:53 PM

Ništa, sretno s projektom

david.fejesOP•3/11/24, 3:55 PM

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

Ddavid.fejes Hvala! Svaka vam cast na Wasp-u, dosta je intuitivno i dosta mi ubrzava rad. Sam...

martinsos•3/11/24, 5:34 PM

Hah super za cuti, thanks :)!

After migration flowbite-react is not working

Similar Threads

Similar Threads

Similar Threads