Rails 7项目中ActionText文本框无法渲染的技术求助

核心问题分析 #

当前配置同时混用了Importmap和ESBuild两种前端打包机制，导致ActionText脚本加载冲突；另外Bootstrap/Popper的导入路径错误，布局文件存在重复JS引入，这些都是文本框无法渲染的关键原因。

具体修复步骤 #

1. 修正 app/javascript/application.js 的导入路径

将Bootstrap和Popper的本地导入改为从npm包导入（依赖通过yarn安装），同时保证ActionText的导入顺序正确：

import "@hotwired/turbo-rails"
import "controllers"

// 优先导入Trix和ActionText
import "trix"
import "@rails/actiontext"

// 修正Bootstrap和Popper的导入路径
import * as bootstrap from 'bootstrap'
import * as Popper from '@popperjs/core'

2. 清理布局文件的重复JS引入

编辑 app/views/layouts/application.html.erb，删除javascript_importmap_tags（使用ESBuild打包无需Importmap机制），保留正确的打包后JS引入：

<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>

<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

注：移除type="module"，ESBuild打包后的文件已兼容浏览器，无需模块标识。

3. 确保Trix样式正确加载

编辑 app/assets/stylesheets/application.bootstrap.scss，添加Trix样式导入（ActionText依赖该样式渲染编辑器）：

// 原有Bootstrap导入
@import "bootstrap";

// 导入Trix编辑器样式
@import "trix/dist/trix.css";

4. 重新打包前端资源并重启服务

执行命令重新编译CSS和JS：

yarn build:css
yarn build

重启Rails服务器：

rails s

5. 验证ActionText安装完整性

确保已执行ActionText安装命令并完成数据库迁移：

rails action_text:install
rails db:migrate

额外排查点 #

• 打开浏览器开发者工具（F12），查看Console面板是否有JS报错（如模块找不到、加载失败等），根据报错信息进一步定位问题。
• 检查页面元素，确认ActionText的DOM结构是否已生成（可能被CSS隐藏，可通过Elements面板查看）。

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