Rails应用用Import map+Tailwind CSS集成Flowbite插件遇模块找不到错误

在基于Rails 7.1.2、tailwindcss-rails 2.1.0的项目中，尝试通过Import map集成Flowbite插件时，构建阶段tailwind.config.js抛出Error: Cannot find module 'flowbite/plugin'错误。移除require('flowbite/plugin')语句后，CSS显示异常，但开发环境无此问题。

报错信息 #

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:255614)
    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)

相关配置 #

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)

CSS异常截图 #

解决方案 #

问题核心是tailwindcss-rails使用的独立版Tailwind CLI无法加载npm包，它运行在无Node环境的快照中，无法解析require('flowbite/plugin')。以下是两种可行解决方法：

方法一：切换到npm管理Tailwind依赖（推荐） #

放弃tailwindcss-rails的独立模式，改用npm管理Tailwind及Flowbite依赖：

1. 移除tailwindcss-rails gem
   编辑Gemfile，注释或删除：

   # gem 'tailwindcss-rails'
   

   执行bundle install更新依赖。

2. 安装esbuild构建工具

   rails javascript:install:esbuild
   

3. 安装Tailwind、Flowbite及相关依赖

   npm install -D tailwindcss postcss autoprefixer flowbite
   

4. 初始化Tailwind配置

   npx tailwindcss init -p
   

5. 更新tailwind.config.js
   配置内容路径并保留Flowbite插件：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./app/views/**/*.html.erb",
       "./app/helpers/**/*.rb",
       "./app/assets/javascripts/**/*.js",
       "./app/javascript/**/*.js",
       "./node_modules/flowbite/**/*.js" // 新增Flowbite内容路径
     ],
     theme: {
       extend: {},
     },
     plugins: [
       require('@tailwindcss/forms'),
       require('@tailwindcss/aspect-ratio'),
       require('@tailwindcss/typography'),
       require('flowbite/plugin')
     ],
   }
   

6. 更新样式文件
   确保app/assets/stylesheets/application.tailwind.css（或对应样式文件）包含：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

7. 更新Import map配置
   将Flowbite的CDN链接替换为本地npm包：

   pin "flowbite", to: "node_modules/flowbite/dist/flowbite.turbo.min.js"
   pin "flowbite-datepicker", to: "node_modules/flowbite/dist/datepicker.turbo.min.js", preload: true
   

8. 执行构建

   npm run build
   rails assets:precompile
   

方法二：手动引入Flowbite插件代码（适合不想切换构建工具的场景） #

如果坚持使用tailwindcss-rails的独立模式，可以手动下载Flowbite插件代码并本地引入：

1. 从Flowbite仓库下载plugin.js文件，保存到项目的config/tailwind/目录下。
2. 修改tailwind.config.js中的插件引用：

   require('./tailwind/plugin.js') // 替换原require('flowbite/plugin')
   

内容的提问来源于stack exchange，提问作者sparkle