Rails JavaScript报错：Uncaught ReferenceError: filterArticleToggle未定义

问题根因排查方案 #

1. 修复函数声明的合规性问题 #

你当前代码的第一行filterArticleToggle = function () {}没有加var/let/const关键字，属于隐式全局变量声明。如果你的项目构建工具（比如Rails的esbuild、webpack，或者其他前端打包工具）开启了严格模式，这种写法会直接抛出异常，导致函数定义失败。
修改方案：直接将函数挂载到全局window对象上，替换原来的第一行声明，同时删除代码末尾重复挂载的语句：

// 替换原第一行的函数声明
window.filterArticleToggle = function () {
    // 原有函数内部逻辑完全不变
    const grid_articles_button = document.querySelector('#grid_articles')
    const list_articles_button = document.querySelector('#list_articles')
    const grid_articles_icon = document.querySelector('#grid_articles_icon')
    const list_articles_icon = document.querySelector('#list_articles_icon')
    const grid_articles_view = document.querySelector('#grid_articles_view')
    const list_articles_view = document.querySelector('#list_articles_view')

    if (grid_articles_button && list_articles_button) {
        grid_articles_button.addEventListener('click', (e) => {
            e.preventDefault()

            grid_articles_icon.classList.add('text-brand-blue')
            grid_articles_icon.classList.remove('text-inherit')

            list_articles_icon.classList.remove('text-brand-blue')
            list_articles_icon.classList.add('text-inherit')

            fetch("/articles/switch_view/Grid").then(function(response) {
                return "ok"
            })

            grid_articles_view.classList.value = "sm:-mx-6 lg:-mx-0 flex flex-wrap"
            list_articles_view.classList.value = 'hidden'
        })

        list_articles_button.addEventListener('click', (e) => {
            e.preventDefault()

            grid_articles_icon.classList.remove('text-brand-blue')
            grid_articles_icon.classList.add('text-inherit')

            list_articles_icon.classList.add('text-brand-blue')
            list_articles_icon.classList.remove('text-inherit')

            fetch("/articles/switch_view/List").then(function(response) {
                return "ok"
            })

            list_articles_view.classList.value = "sm:-mx-6 lg:-mx-0 flex flex-wrap"
            grid_articles_view.classList.value = 'hidden'
        })
    }
}

// 保留turbolinks监听逻辑
document.addEventListener('turbolinks:load', () => {
    filterArticleToggle()
})

// 删掉原来最后一行的 window.filterArticleToggle = filterArticleToggle 重复代码

2. 检查脚本引入配置 #

• 确认article.js的引入标签没有加async属性：async属性会让脚本异步加载执行，很可能turbolinks:load事件触发时脚本还没执行完成，函数还未定义，将async替换为defer或者直接移除即可。
• 确认article.js的引入顺序在Turbolinks核心脚本之后，否则turbolinks:load事件监听注册失败会导致脚本执行中断，函数无法完成定义。

3. 排查页面独有冲突 #

个人资料页运行正常说明函数本身逻辑无问题，优先检查文章索引页独有的脚本：

• 看控制台有没有其他报错排在ReferenceError之前，其他脚本的报错可能会中断后续article.js的执行
• 确认索引页没有其他脚本在article.js加载完成前就调用了filterArticleToggle函数

如果是Rails 7+使用importmaps的场景，还要确认你没有把article.js配置为模块加载，模块作用域下的变量默认不会挂载到全局window，也会触发未定义错误。

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