Rails 6通过js.erb实现动态Bootstrap Modal报Unexpected token '==='错误如何解决

SyntaxError: Unexpected token '==='错误来自pay.js.erb模板的语法错误，同时你的代码还存在DOM节点选择逻辑错误，修复步骤如下：

1. 核心错误修复：修正pay.js.erb写法 #

你的原代码存在两个低级错误：

• escape_javascript是Ruby端方法，必须写在<%= %>内部，你现在把它放在ERB插值外，会被当成普通字符串输出，导致渲染后的JS代码包含未转义的HTML非法字符，触发语法错误
• 你选择的#pay_invoice节点本身就是你要渲染的Modal组件，页面初始加载时不存在该节点，querySelector会返回空值导致后续方法调用失败

替换为以下代码即可：

// 先移除已存在的同ID Modal，避免重复插入
const existModal = document.querySelector("#pay_invoice")
if(existModal) existModal.remove()

// 渲染Modal并插入到页面body尾部
document.body.insertAdjacentHTML('beforeend', "<%= escape_javascript(render partial: 'pay', locals: { event: @event }) %>")

const payModal = document.querySelector("#pay_invoice")
// Bootstrap 4 唤起方式（jQuery环境）
if(window.jQuery) {
  $(payModal).modal('show')
} else {
  // Bootstrap 5 原生唤起方式
  new bootstrap.Modal(payModal).show()
}

2. 可选优化：避免ID冲突 #

如果需要同时支持多条记录的Modal打开，可以修改Modal的ID为动态值，适配单页多实例场景：

• 局部视图_pay.html.erb中修改ID为：<div class="modal fade show" id="pay_invoice_<%= event.id %>" ...>
• 对应修改pay.js.erb中的选择器为#pay_invoice_<%= @event.id %>即可

3. 依赖验证 #

确保你的Rails 6项目已正确引入Bootstrap JS依赖：

• 若使用Webpacker：检查app/javascript/packs/application.js中已导入Bootstrap JS，且已将bootstrap挂载到window全局对象
• 若使用Sprockets：检查app/assets/javascripts/application.js中已添加//= require bootstrap声明

你的控制器、路由、列表视图的现有配置均无问题，无需修改。

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