Rails 7 默认启用 Turbo，通过缓存并复用页面 DOM 来实现快速导航；但未清理旧脚本时，重复插入 标签会导致 const 变量二次声明报错，而硬刷新会重建完整上下文，故无此问题。
rails 7 中 turbo 导致 js 变量重复声明的根源与解决方案：rails 7 默认启用 turbo，通过缓存并复用页面 dom 来实现快速导航；但未清理旧脚本时，重复插入 `<script>` 标签会导致 `const` 变量二次声明报错，而硬刷新会重建完整上下文，故无此问题。</script>
在 Rails 7 应用中，当你使用 link_to 跳转到含内联脚本的页面（如 <script>const chart_data = <%= sanitize @transactions %>;</script>）时，Turbo 会通过 Turbo Frame 或 Turbo Drive 复用当前页面的 和已执行的 JS 上下文，并仅替换 内容。但关键问题在于：Turbo 不会自动移除前一页中已注入的 <script></script> 标签——这意味着每次跳转都会重新执行该 <script></script> 块，从而对 const chart_data 发起第二次声明，触发 Uncaught SyntaxError: redeclaration of const chart_data。
而手动刷新（F5 或地址栏回车）则绕过 Turbo 缓存机制，触发完整 HTML 文档重载（full page reload），浏览器清空 JS 执行环境后重新解析整个页面，自然避免了变量重复声明。
✅ 推荐解决方案（按优先级排序）
1. 禁用 Turbo（快速验证 & 局部修复）
适用于单页或临时调试：
<%= link_to "Transactions", transactions_path, data: { turbo: false } %>添加 data: { turbo: false } 后，链接将退化为传统 HTTP GET 请求，强制整页刷新，行为等同于手动 reload。
⚠️ 注意：这不是长期方案，会丢失 Turbo 带来的用户体验优势（如平滑过渡、保留表单状态等）。
2. 改用模块化、防重复执行的 JS 初始化模式（推荐）
避免在视图中直接写 const 声明，改为「声明 + 挂载」分离：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
<!-- index.html.erb -->
<div id="chart-container" data-chart-data="<%= j @transactions.to_json %>"></div>
<script type="module">
// ✅ 安全：模块脚本天然具有作用域隔离，且不会重复执行
import { renderChart } from "/assets/charts.js";
document.addEventListener("turbo:load", () => {
const el = document.getElementById("chart-container");
if (el && !el.dataset.chartRendered) {
const data = JSON.parse(el.dataset.chartData);
renderChart(data);
el.dataset.chartRendered = "true"; // 防重复渲染
}
});
</script>对应 app/javascript/charts.js：
export function renderChart(data) {
// 实际图表逻辑，如 Chart.js 初始化
console.log("Rendering chart with", data.length, "transactions");
}✅ 优势：
- 利用
turbo:load事件精准控制执行时机； -
dataset标记确保同一元素只初始化一次； - JSON 数据通过
data-*属性传递，规避模板内联 JS 的语法风险； - 符合 Rails 7+ 的 JS 架构演进方向（ESM + Import Maps / JS Bundler）。
3. 全局统一处理：封装安全的 declareOnce 工具函数
若需保留部分内联脚本习惯，可定义一个防重声明工具：
<script>
window.declareOnce = (name, value) => {
if (typeof window[name] === 'undefined') {
Object.defineProperty(window, name, {
value,
writable: false,
enumerable: true,
configurable: false
});
}
};
</script>然后在视图中使用：
<script>
declareOnce('chart_data', <%= raw @transactions.to_json %>);
</script>? 原理：
Object.defineProperty确保属性不可被后续const/let/var覆盖，且writable: false+configurable: false提供强防护。
? 关键总结
| 场景 | 行为 | 是否触发重声明 |
|---|---|---|
link_to（默认 Turbo） |
DOM 局部替换，<script></script> 重复执行 |
✅ 是 |
| 浏览器刷新（F5） | 全量重建 JS 环境 | ❌ 否 |
data-turbo="false" |
强制整页 reload | ❌ 否 |
turbo:load + dataset 标记 |
按需、单次执行 | ❌ 否 |
根本解法不是“绕开 Turbo”，而是拥抱 Turbo 的生命周期事件，将 JS 初始化从“页面加载即执行”转变为“Turbo 导航后按需挂载”。这既是 Rails 7 的最佳实践，也是构建可维护前端的关键一步。
