Rails 7导入自定义JS后Action Text/Trix无法正常工作

你遇到的Action Text/Trix编辑器失效问题，由两个配置错误直接导致：

• 导入顺序错误：app/javascript/application.js 中的JS资源存在严格的加载时序要求，Rails内置的Action Text、Trix相关依赖必须在所有自定义JS之前加载。如果添加自定义导入语句时打乱了原有内置导入的顺序，或是把自定义JS的导入放在了@rails/actiontext、trix的导入语句之前，就会导致Trix初始化时序异常，编辑器无法正常渲染。
• 开发环境错误执行资源预编译：Rails 7开发环境默认优先读取public/assets目录下的预编译静态资源，你在本地开发阶段执行rails assets:precompile后，生成的静态资源缓存不会自动跟踪代码变更，会出现资源加载冲突，直接打断Action Text的初始化流程。

• 调整app/javascript/application.js的导入顺序，所有Rails内置框架的导入放在文件前部，自定义JS的导入统一放在文件末尾，参考正确结构如下：

// Rails内置依赖，不要随意调整顺序、不要删除
import "@hotwired/turbo-rails"
import "@rails/activestorage"
import "channels"
import "trix"
import "@rails/actiontext"

// 所有自定义JS导入放在内置依赖之后
import "custom/main"

• 执行命令清理错误生成的预编译资源缓存：

rails assets:clobber

注意：开发环境不需要手动执行rails assets:precompile，importmap会自动处理开发阶段的资源加载，该命令仅在生产环境部署前执行即可。

• 检查app/javascript/custom/main.js的代码逻辑，不要编写覆盖全局Trix对象、主动移除DOM中trix-editor节点的逻辑，这类代码也会直接导致编辑器消失。
• 重启本地Rails服务，硬刷新浏览器清理前端JS缓存即可恢复正常。

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