themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.82k stars 406 forks source link

Long compilation of Nextjs application after connecting flowbite-react #1193

Closed AntonAndreevichMoroz closed 8 months ago

AntonAndreevichMoroz commented 8 months ago

Steps to reproduce

  1. Add to tailwind.config.js "./node_modules/flowbite-react/*/.js"
  2. Run 'npm run dev' or 'npm run build'

Current behavior

The first page rendering and application assembly takes a very long time, several minutes

Expected behavior

Working with the framework without changing startup speed

Context

I tried deleting node-modules and .next folders, reinstalling the flowbite-react package. This doesn't solve the problem.

If I delete a line from tailwindcss config.js, then compilation happens quickly, but naturally the styles are not pulled up.

I also tried to take the components separately from the repository and place them in my project as src code. In this form, the components are also quickly assembled.

I'm using the latest lts version of nodejs and nextjs 14

Is this a limitation of the free version?

rluders commented 8 months ago

Maybe you could change the path to only import the esm module on your tailwind.config.js?

./node_modules/flowbite-react/esm/**/*.js
// or 
./node_modules/flowbite-react/lib/esm/**/*.js

I don't actually remember the correct path. :)

tulup-conner commented 8 months ago

Yea, I would try replacing the path by

"./node_modules/flowbite-react/lib/esm/**/*.js"

I'm not sure if that's the cause of your problem, if not, feel free to share a sample repo where you're having this issue so maybe we can figure that out.

heavyengineer commented 8 months ago

making this change in tailwind.config.js improved the situation for me:

  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/flowbite-react/lib/esm/**/*.js"],
rluders commented 8 months ago

I'm relating this issue to the documentation. We should update the instructions to fix the import path.

SutuSebastian commented 8 months ago

Documentation is fixed in #1194.

Now, to fix ur issue the correct tailwind config content path is:

'node_modules/flowbite-react/lib/esm/**/*.js'
SutuSebastian commented 8 months ago

And to answer ur questions:

Is this a limitation of the free version?

No, this is a known issue, it compiles all the .js files that it finds and at the moment there are more than they should be (a fix is on the way already), hence the large amount of time waiting to compile everything.