Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
AntonAndreevichMoroz opened this issue Dec 17, 2023 · 6 comments
Labels
📚 documentation Improvements or additions to documentation good first issue Good for newcomers

Comments

@AntonAndreevichMoroz
Copy link

AntonAndreevichMoroz commented Dec 17, 2023

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
Copy link
Collaborator

rluders commented Dec 17, 2023

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
Copy link
Collaborator

tulup-conner commented Dec 18, 2023

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
Copy link

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 rluders added 📚 documentation Improvements or additions to documentation good first issue Good for newcomers labels Dec 19, 2023
@rluders
Copy link
Collaborator

rluders commented Dec 19, 2023

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

@SutuSebastian
Copy link
Collaborator

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
Copy link
Collaborator

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.

paulbuehlerdev added a commit to alexanderleppink/ad-library-database-tool that referenced this issue Feb 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📚 documentation Improvements or additions to documentation good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

5 participants