Rails 7 默认启用 Turbo（取代旧版 Turbolinks），在通过 link_to 导航时复用页面 DOM 并仅替换 内容，导致内联脚本重复执行、const 变量多次声明而报错；刷新页面则触发完整 HTML 重载，避免重复解析。
rails 7 中 turbo 导致 js 变量重复声明的根源与解决方案
在 Rails 7 应用中，当你使用 进行导航时，Turbo 会拦截该请求，通过 fetch() 获取新页面的 HTML，并仅替换 内容，同时保留原始 及已执行的 JavaScript 环境。这意味着：你写在 index.html.erb 中的内联 <script></script> 块（如 const chart_data = ;）会在每次 Turbo 导航到该页面时被再次解析并执行——而 const 是块级作用域且不可重复声明，因此触发 Uncaught SyntaxError: redeclaration of const chart_data。
但手动刷新（F5 或地址栏回车）会触发完整的页面重新加载（full page reload）：浏览器清空当前 JS 执行上下文，重新解析整个 HTML（包括 和 ），所有脚本从头执行一次，自然不会出现重复声明问题。
✅ 正确应对方式不是禁用 Turbo（除非必要），而是遵循 “Turbo-Friendly JavaScript” 原则：
✅ 推荐方案：将内联脚本移出模板，改为模块化、防重复执行
<!-- app/views/transactions/index.html.erb --> <div id="chart-container" data-transactions="<%= j @transactions.to_json %>"></div>
// app/javascript/controllers/chart_controller.js (using Stimulus)
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static values = { transactions: Object }
connect() {
// 安全解析数据，仅在当前元素挂载时执行一次
const data = this.transactionsValue
this.renderChart(data)
}
renderChart(data) {
// 你的图表初始化逻辑（如 Chart.js）
}
}
并在视图中声明控制器：
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
<div data-controller="chart" data-chart-transactions-value="<%= j @transactions.to_json %>"> </div>
⚠️ 临时方案（仅限快速验证）：禁用 Turbo 当前链接
这会强制该链接走传统 HTTP GET，触发完整页面重载 —— 效果等同于刷新，但牺牲了 Turbo 的平滑体验，不建议在生产环境广泛使用。
? 根本原因再强调：
- Turbo 不会销毁已加载的
<script></script>，也不会清理全局变量； - 模板内联
<script></script>在 Turbo 页面变更时无条件重执行； -
const/let声明具有时间死区（TDZ）和重复声明限制，无法“覆盖”； -
var虽可重复声明，但存在变量提升与作用域污染风险，绝不可替代const修复此问题。
✅ 最佳实践总结：
| 场景 | 推荐做法 |
|---|---|
| 动态注入数据 | 使用 data-* 属性传递 JSON，由 Stimulus 或原生 JS 解析 |
| 初始化第三方库 | 封装为 Stimulus controller 或使用 turbo:load 事件（需手动去重） |
| 全局配置脚本 | 移至 app/javascript/application.js，确保只加载一次 |
| 需兼容旧代码 | 在 <script></script> 外层加防护：if (typeof chart_data === 'undefined') { const chart_data = ... }（不推荐，仅作过渡） |
Turbo 的设计哲学是「渐进增强」，而非「脚本重放」。把 JavaScript 视为响应式行为（behavior），而非一次性脚本（script），才是 Rails 7+ 前端开发的正确起点。
