admin管理员组

文章数量:1123377

The stack is: RoR 8 + turbo-rails + propshaft + importmaps-rails + tailwindcss-rails + Flowbite.

I have completed the integration steps from the Flowbite guide to add Flowbite to my Rails app. At first glance it worked, but I've found that I can't import anything from the Flowbite in a Stimulus controller, e.g. when I'm trying to import Dismiss:

// app/javascript/controllers/toasts_controller.js
import { Controller } from "@hotwired/stimulus";
import { Dismiss } from "flowbite";

export default class extends Controller {
  connect() {
  }
}

This fails with the following error:

Failed to register controller: toasts (controllers/toasts_controller) SyntaxError: The requested module 'http://localhost:3000/assets/flowbite.turbo.min-[hash].js' doesn't provide an export named: 'Dismiss'

The same error occurs with the import { Datepicker } from 'flowbite';, etc..

It seems that Flowbite has long-lasting troubles when paired with Turbo (see this issue). I also found a very similar issue, but I couldn't grasp the proposed solution.

The versions are:

$ rails -v
Rails 8.0.1

$ npm list flowbite
[email protected] /path-to-my-app/node_modules/flowbite

My app/config/tailwind.config.js file:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  darkMode: 'selector',
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',
    './node_modules/flowbite/**/*.js'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('flowbite/plugin'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ]
}

Any help would be much appreciated.

本文标签: