Rails 7.0.5部署时出现Cannot find module 'tailwindcss/defaultTheme'错误求助

环境：Rails 7.0.5 + Ruby 3.1.2，通过rails new ... --css tailwind预安装tailwindcss-rails gem，开发模式下Tailwind CSS和Flowbite运行正常，但Capistrano部署执行assets:precompile时出现模块找不到错误。

错误日志 #

bundler:install
  The Gemfile's dependencies are satisfied, skipping installation
00:27 deploy:assets:precompile
  01 $HOME/.rbenv/bin/rbenv exec bundle exec rake assets:precompile
  01
  01 Rebuilding...
  01 Error: Cannot find module 'tailwindcss/defaultTheme'
  01 Require stack:
  01 - /var/www/ai_demo/releases/20230525205652/config/tailwind.config.js
  01     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
  01     at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
  01     at Function.resolve (node:internal/modules/cjs/helpers:108:19)
  01     at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:241025)
  01     at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:243309)
  01     at /var/www/ai_demo/releases/20230525205652/config/tailwind.config.js:1:97
  01     at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:245784)
  01     at /snapshot/tailwindcss/lib/lib/load-config.js:37:30
  01     at loadConfig (/snapshot/tailwindcss/lib/lib/load-config.js:39:6)
  01     at Object.loadConfig (/snapshot/tailwindcss/lib/cli/build/plugin.js:135:49) {
  01   code: 'MODULE_NOT_FOUND',
  01   requireStack: [
  01     '/var/www/ai_demo/releases/20230525205652/config/tailwind.config.js'
  01   ]
  01 }

相关配置文件 #

tailwind.config.js #

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  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('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('flowbite/plugin'),
  ]
}

config/importmap.rb #

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.7/lib/index.js"
pin "flowbite", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.turbo.min.js"

app/javascript/application.js #

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import 'flowbite';

解决方案 #

1. 调整tailwind默认主题的引入方式 #

修改tailwind.config.js中的默认主题引入代码，适配tailwindcss-rails gem的模块结构：

// 替换原来的 require('tailwindcss/defaultTheme')
const defaultTheme = require('tailwindcss').defaultTheme

2. 安装Flowbite的本地npm依赖 #

由于tailwind编译时需要读取Flowbite插件的本地代码，仅通过CDN引入前端代码无法满足编译需求：

• 项目根目录创建package.json（若不存在）：

  npm init -y
  

• 安装Flowbite开发依赖：

  npm install flowbite --save-dev
  

• 将package.json和package-lock.json提交到版本控制，确保部署时同步到服务器。
• 修改Capistrano部署脚本，在预编译资产前执行npm依赖安装：
  在config/deploy.rb中添加：

  namespace :deploy do
    desc 'Install npm dependencies'
    task :npm_install do
      on roles(:web) do
        within release_path do
          execute :npm, 'install'
        end
      end
    end
  end
  
  before 'deploy:assets:precompile', 'deploy:npm_install'
  

3. 确认部署服务器的Node.js版本 #

确保服务器安装了Node.js 16+版本，版本过低可能导致模块加载异常。可通过Capistrano插件（如capistrano-nvm）管理服务器的Node版本。

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