flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Cannot find module 'flowbite/plugin' - TailwindCSS, Ruby on Rails, and Importmap

Open leoplct opened this issue 1 year ago • 4 comments

Describe the bug I got this error from tailwind.config.js

Error: Cannot find module 'flowbite/plugin'

Require stack:
/home/runner/work/project/project/config/tailwind.config.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at Function.resolve (/snapshot/tailwindcss/standalone-cli/patch-require.js:34:38)
    at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:250334)
    at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:252917)
    at /home/runner/work/project/project/config/tailwind.config.js:74:5
    at evalModule (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:2556[14](https://github.com/name/project/actions/runs/7275447114/job/19823350019#step:8:15))
    at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:253542)
    at /snapshot/tailwindcss/lib/lib/load-config.js:48:30 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/runner/work/project/adprojectvigator/config/tailwind.config.js' ]
}
bin/rails aborted!
Command failed with exit 1: /opt/hostedtoolcache/Ruby/3.2.2/x64/lib/ruby/gems/3.2.0/gems/tailwindcss-rails-2.1.0-x86_64-linux/exe/x86_64-linux/tailwindcss

Tasks: TOP => test:prepare => tailwindcss:build
(See full trace by running task with --trace)

To Reproduce

config/tailwind.config.js

plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('flowbite/plugin'),
    {
      tailwindcss: {},
      autoprefixer: {},
      ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
    }
  ]

config/importmap.rb

pin "flowbite", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.turbo.min.js"
pin "flowbite-datepicker", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/datepicker.turbo.min.js", preload: true

app/javascript/application.js

import 'flowbite';
import 'flowbite-datepicker';

Gemfile rails (7.1.2) tailwindcss-rails (2.1.0-x86_64-darwin) railties (>= 6.0.0)

If I remove require('flowbite/plugin') the the CSS is not working properly (see screenshot)

Screenshot 2023-12-20 at 13 35 41

leoplct avatar Dec 20 '23 12:12 leoplct

@leoplct any progress on this? Having similar issues getting all these pieces to play along.

mbhnyc avatar Jan 03 '24 00:01 mbhnyc

I gave up and switched to standard HTML date field

<input type="date" />

leoplct avatar Jan 03 '24 09:01 leoplct

Is this fixed? I tried to switch to Flowbite today, but this error makes me consider other libraries instead :/

morgler avatar Apr 28 '24 20:04 morgler

I create a solution for standalone tailwindcss - https://github.com/iwdt/flowbite-rails

Just download a plugin

iwdt avatar May 17 '24 04:05 iwdt

Hey @leoplct, @mbhnyc, @morgler, @iwdt,

Since v2.4.1 the datepicker is a core component of Flowbite and with Ruby on Rails you no longer have to separately install the Flowbite Datepicker plugin since it comes out of the box. Please check the new guide here:

https://flowbite.com/docs/getting-started/rails/#datepicker

And the new Flowbite Datepicker API here:

https://flowbite.com/docs/components/datepicker/#javascript-behaviour

Cheers, Zoltan

zoltanszogyenyi avatar Jun 27 '24 10:06 zoltanszogyenyi