本地VSC运行正常，Heroku部署报错ReferenceError: window is not defined

问题背景 #

我遇到了ReferenceError: window is not defined错误，本地VS Code调试控制台和Heroku日志中均出现该问题。排查后发现，根源是app.js直接调用了浏览器环境特有的window对象，原代码片段如下：

window.addEventListener('load', function() {
    readCSVFile('csvfile.csv');
})

// ...rest of code...

按照相关文章建议添加环境判断逻辑后，本地VS Code的错误得以解决，但Heroku部署后依然报错——提交和构建流程均成功，但应用无法正常打开，Heroku日志仍显示相同的window is not defined错误，添加的判断代码如下：

if (typeof window !== 'undefined') {
    console.log('You are on the browser');
  
    // ✅ Can use window here
    console.log(window.innerWidth);

    window.addEventListener('load', function() {
        readCSVFile('csvfile.csv');
    })
    //...rest of code...

} else {
    console.log('You are on the server');
    // ⛔️ Don't use window here
}

可能的失效原因 #

• 若项目采用服务器端渲染（SSR），打包工具（如Webpack、Vite）在构建阶段可能会提前解析window相关代码，导致环境判断逻辑在服务器执行时并未生效；
• Heroku的Node.js运行环境中，部分依赖或自定义构建脚本可能强制在服务器上下文执行原本属于浏览器的代码片段，绕过了手动添加的环境判断。

最终解决方案 #

正如后续更新的结论：重构JavaScript文件为Node.js兼容版本是最彻底的解决办法

• 移除所有浏览器专属API（如window、document）的直接调用；
• 对于文件读取这类操作，改用Node.js原生的fs模块实现；
• 将前端交互逻辑拆分到独立的前端文件中，确保这部分代码仅在浏览器环境下加载执行。

确实没有快速替换浏览器特定代码的捷径，环境差异是全栈开发中需要重点注意的问题。

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