themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.74k stars 727 forks source link

Rails 7: Error: Cannot find module 'flowbite/plugin' #687

Open didlix opened 11 months ago

didlix commented 11 months ago

Describe the bug I was running Rails 7.0.4 and an outdated version of tailwindcss-rails, followed the instructions from the documentation and got the error described in the title

I decided to update the version of tailwindcss-rails to try and resolve it that way, at which point I got a new error which you can find described here..

(I eventually uodated everything so am now on Rails 7.0.8)

It seems there is an issue resolving the plugin and I am not sure what to do to try and resolve it. Any suggestions would be appreciated.

Expected behavior The plugin would load and I would be able to boot my rails 7 app and use flowbite.

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

https://github.com/rails/tailwindcss-rails/discussions/269

spaquet commented 11 months ago

defaultTheme is not found.

antonioeloi commented 1 month ago

If you are using importmap, the default way of handling JavaScript on Rails 7, don't forget to:

  1. Add the following line inside your importmap.rb file: pin "flowbite", to: "https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.turbo.min.js"

  2. Then you need to import flowbite inside your application.js file: import 'flowbite';

Reference: https://flowbite.com/docs/getting-started/rails/

spaquet commented 1 month ago

@antonioeloi this is assuming that the project is using importmap... But for esbuild?

antonioeloi commented 1 month ago

@spaquet just beneath what I pasted as reference you can find the following:

ESBuild

If you use ESBuild to Bundle your JavaScript on Rails, you will need to import a version of Flowbite which supports the turbo:load event listeners instead of load. To do this add the line below to your application.js file:

import "flowbite/dist/flowbite.turbo.js";